IE对CSS样式表的限制和解决方案
作者:秦歌 来源:随网之舞 发布时间:2008-04-28 12:27:00
HTML文档与CSS的关联常见有4种方式:
1.使用link标记
<link rel="stylesheet" type="text/css" href="sheet.css" />
使用style元素
<style type="text/css">
body{background:#fff;}
h1{font-size:2em;}
</style>使用@import指令
<style type="text/css">
@import url(sheet1.css);
@import "sheet2.css";
</style>使用style属性的内联样式(inline style)
<p style="color:#f00;">这是红色的字</p>
在实际应用中,使用style属性的内联样式是不推荐使用的,XHTML1.1已经将其标准为不建议使用,原因很简单这种方式不比font标记强多少,削弱了CSS集中控制整个文档外观的优点。前3种方式利用了link标记和style标记,在IE(包括IE6、IE7和IE8 beta1)中有如下限制:
文档中只有前31个link或style标记关联的CSS能够应用。
从第32个开始,其标记关联的CSS都将失效。IE的官方文档All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及这个限制,包括在使用.xsl的.xml文件也有这个限制。但是似乎写错了数量。请在IE看:
一个style标记只有前31次@import指令有效应用。
从第32个@import指令开始忽略。请看:
一个css文件只有前31次@import指令有效应用。
从第31个@import指令开始忽略。请看:
例4:用link标记引入一个使用34次@import指令的css文件
一个CSS文件的不能超过288kb?
IE对CSS的限制在绝大部分情况下是不会遇到的,即使遇到最佳的解决方案也应该是手动或者通过后端程序对CSS文件和响应的标记进行合并,最小化的http请求数是优化页面呈现的第一原则。
在IE中,可以通过document.styleSheets对象(Firefox、Opera9和Safari3.1都支持)修改内联和嵌入样式的值。该对象仅在文档包含style或link元素时可用,其实用document.styleSheets.length就可以看出IE下这个值最大是31。下面是利用Javascript来合并link和style标记来解决IE下的限制:
var fnMergeStyleSheet = function(){
if(!document.styleSheets){
return;
}
var aSheet = document.styleSheets,
aStyle = document.getElementsByTagName('style'),
aLink = document.getElementsByTagName('link');
if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){
//document.styleSheets.cssText只有IE支持
return;
}
var aCssText = [],aCloneLink = [];
//把style标签中的样式存入,然后删掉该标签,但保留第一个
//因为由getElementsByTagName方法返回值是nodeList,所以删除时循环用倒序
for(var i=aStyle.length-1;i>-1;–i){
var o = aStyle[i];
aCssText.push(o.innerHTML);
if(i>0){
o.parentNode.removeChild(o);
}
}
//在IE中只有在31之内的link标签才能通过其styleSheet.cssText获取样式
//无法的获取复制到一个数组aCloneLink中
for(var i=aLink.length-1;i>-1;–i){
var o = aLink[i];
if(o.getAttribute && o.getAttribute(’rel’)===’stylesheet’){
if(o.styleSheet){
aCssText.push(o.styleSheet.cssText);
}else{
aCloneLink.push(o.cloneNode(true));
}
if(i>0){
o.parentNode.removeChild(o);
}
}
}
var oHead = document.getElementsByTagName(’head’)[0];
//通过前面的删除,前31个link或者style标记最多只剩下2个
//通过重新增加link节点的方法激活其styleSheet属性,从而获取样式
for(var i = aCloneLink.length-1;i>-1;–i){
var o = aCloneLink[i];
oHead.appendChild(o);
aCssText.push(o.styleSheet.cssText);
oHead.removeChild(o);
}
aSheet[0].cssText += aCssText.join(”);
}
上面仅仅是一个简单的粗糙的解决方案,演示请看例1和例2,可以改进的地方还有:
没有考虑media这个属性,如果有多个media应该分别合并,当然更没有考虑link标记的rel="alternate stylesheet"带来的影响。但我更建议通过@media指令把相应的样式写在同一个文件中,至少可以减少HTTP连接数。
没有解决@import指令31次限制的问题,其实可以提取其href值然后进行激活处理。但是实际应用在建议用link标记来替代@import指令,应为在IE中@import指令相当与把link标记写在文档的底部,会导致页面加载时瞬间无样式问题。
一般来讲页面之所有出现大量的link或者style
猜你喜欢
- asp中怎么替换最后一个逗号为空字符串?举例 aaa,bbb,ccc,eee, 这个字符串怎么让最后一个逗号变没,其他的不变啊 ?问题补充:
- web2.0的标志是Ajax的异步通信的发掘,给我们带来像google map,google suggest 这样令人惊叹的东西。而Ajax
- 首先要声明一点,大部分情况下,修改MySQL是需要有mysql里的root权限的, 所以一般用户无法更改密码,除非请求管理员。方法一使用ph
- XML是一个精简的SGML,它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能,这使XML从根本
- CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA
- CSS执行顺序与优先权的问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其
- 关于《回访确认》这件事情,在我blog和5Gme的回复里普遍出现这么几个疑问:1、下了订单却放弃支付的心理因素是什么?2、回访电话可以促进订
- 在我们的生活中,只要你睁开眼睛就能看到各种各样的视觉。不同的视觉能给你不同的视觉暗示,同样能给你不同的心理感受。视觉这个话题太泛了,大自然中
- 用ASP判断一个字符串中只包含字母和数字要怎么做啊? for s=1 to len(trim(use
- Exec sp_droplinkedsrvlogin ZYB,Null --删除映射(录与链接服务器上远程登录之间的映射) Exec sp_
- 在做我的友情链接批量检查工具过程中,碰到一些情况,就是对方网页会用gzip压缩。用gzip压缩的好处是,能压缩网页大小,加快网页的浏览速度,
- ASP+javascript实现可显示和隐藏的树型菜单实例:<script language=&qu
- FileSystemObject、Folder 和 File 对象的一些方法都与通过 TextStream 对象创建、读取或写入文件有关。虽
- 首先看这下面的例子(鼠标移上去):<TABLE><TBODY><TR&g
- 内容摘要:本文是一篇实例讲解的文章。作为一个普通的程序员,我深知,一个优秀的例程,对于正在学习编程的人是多么的有帮助。本文中使用的例程,是一
- 在做视觉设计时,如何高效地使用图标是一门学问:该使用什么样的图标?图标该放在哪里?大小如何?图标的使用是否帮助用户更好更快的理解内容,亦或是
- 今天在设置input的readonly属性遇到问题,上网查到下面的内容,作个标记。今天系统需要使用javascript 动态设置textbo
- 很多设计师都会遇到这样的问题。一个产品会有很多种方式去包装,其中包括很多功能和很多体验。功能越多会被认为越实用,体验越好会被认为越方便。方便
- 一般上电子商务网站买东西的用户分三种:随便看看,就是不买先看看,买不买再说就是来买东西的这样的需求反应到产品页的购买按钮上,我们一般会看到购
- 1、单个关键字加亮代码: <div id="txt"> 用JS让文章内容指定