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
猜你喜欢
- 概述WSGI接口包含两方面:server/gateway 及 application/framework。server调用由applicat
- 不要使用Logrus这其实和泛型有关。因为Go语言是一门强类型的静态语言,所以你不可能像NodeJS或者PHP那样绕过数据类型。那如果我们还
- 1. 调度器scheduler的作用我们都知道,在Go语言中,程序运行的最小单元是gorouines。然而程序的运行最终都是要交给操作系统来
- 便携文档格式 (PDF) 是由 Adobe 开发的格式,主要用于呈现可打印的文档,其中包含有 pixel-perfect 格式,嵌入字体以及
- 1 减少HTTP请求数量 (Minimize HTTP Requests) tag:content80%的用户响应时间被花费在前端
- 微信小程序要去哪里找?又该怎么用?秘密全在这里微信小程序正式发布 看完你也会玩小程序! 2017年1月9日,是一个值得载入互联网
- mysql8.0.12安装教程,分享给大家。一.安装1.从网上下载MySQL8.0.12版本,下载地址2. 下载完成后解压我解压的路径是:D
- 前言本文通过示例给大家详细介绍了关于python打印三角形的相关,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧1、直角三角
- 清除日志: DECLARE @LogicalFileName sysname, @MaxMinutes INT, @NewSize INT
- 建表、insert数据create table tmp_login ( user_id int(11) , logi
- 这篇文章主要介绍了python列表推导式入门学习解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- asp之家注:也许很多人对网页设计中的,id和class和name的区别不是很清楚,好像觉得都可以使用,没什么不同。就我个人来讲,我的理解是
- 本文实例讲述了php实现压缩多个CSS与JS文件的方法。分享给大家供大家参考。具体实现方法如下:1. 压缩css<?php
- 爬虫利器BeautifulSoup中find和find_all的使用方法二话不说,先上段HTML例子<html> &
- ImageFont模块定义了相同名称的类,即ImageFont类。这个类的实例存储bitmap字体,用于ImageDraw类的text()方
- 前言:大家好,今天和大家分享自己总结的6个常用的 Python 数据处理代码,对于经常处理数据的coder最好熟练掌握。1、选取有空值的行在
- 一、题目在文本框中输入一个生日值,点击按钮,可以显示此生日的对应星座。定义一个函数,该函数用来接收一个生日值(月日组成的4位字符串,比如“0
- 在代码首行添加:%matplotlib inline即可。补充知识:jupyter不能显示Matplotlib 动画看莫烦老师的matplo
- 大多数卷积神经网络都是直接通过写一个Model类来定义的,这样写的代码其实是比较好懂的,特别是在魔改网络的时候也很方便。然后也有一些会通过c
- 本文实例讲述了python实现的AES双向对称加密解密与用法。分享给大家供大家参考,具体如下:高级加密标准(Advanced Encrypt