IE对网页页面中引进CSS款式表的限定

日期:2021-01-20 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

  最先详细介绍1下HTML文本文档与CSS 的关系普遍有4种方法:
1、应用link标识
<linkrel="stylesheet"type="text/css"href="sheet.css"/>
2、应用style元素
<styletype="text/css">
body{background:#fff;}
h1{font-size:2em;}
</style>
3、应用@import命令
<styletype="text/css">
@importurl(sheet1.css);
@import"sheet2.css";
</style>
4、应用style特性的内联款式(inlinestyle)
<pstyle="color:#f00;">这是鲜红色的字</p>
  在具体运用中,应用style特性的内联款式是不强烈推荐应用的,XHTML1.1早已将其规范为不提议应用,缘故很简易这类方法不比font标识强是多少,消弱了CSS集中化操纵全部文本文档外型的优势。
  前3种方法运用了link标识和style标识,在IE(包含IE6、IE7和IE8beta1)中有以下限定:
◆文本文档中仅有前31个link或style标识关系的CSS可以运用。
  从第32个刚开始,其标识关系的CSS都将无效。IE的官方文本文档Allstyletagsafterthefirst30styletagsonanHTMLpagearenotappliedinInternetExplorer也提及这个限定,包含在应用.xsl的.xml文档也是有这个限定。可是好像写错了数量。请在IE看:
◆1个style标识仅有前31次@import命令合理运用。
  从第32个@import命令刚开始忽视。
◆1个css文档仅有前31次@import命令合理运用。
  从第31个@import命令刚开始忽视。
◆1个CSS文档的不可以超出288kb?
  这个信息来自InternetExplorerCSSFileSizeLimit。
  IE对CSS的限定在绝绝大多数状况下是不容易遇到的,即便遇到最好的处理计划方案也应当是手动式或根据后端开发程序流程对CSS文档和回应的标识开展合拼,最少化的http恳求数是提升网页页面展现的第1标准。
  在IE中,能够根据document.styleSheets目标(Firefox、Opera9和Safari3.1都适用)改动内联和嵌入款式的值。该目标仅在文本文档包括style或link元素时能用,实际上用document.styleSheets.length便可以看出IE下这个值最大是31。下面是运用Javascript来合拼link和style标识来处理IE下的限定:
varfnMergeStyleSheet=function(){
if(!document.styleSheets){
return;
}
varaSheet=document.styleSheets,
aStyle=document.getElementsByTagName('style'),
aLink=document.getElementsByTagName('link');
if(aStyle.length aLink.length<32||!aSheet[0].cssText){
//document.styleSheets.cssText仅有IE适用
return;
}
varaCssText=[],aCloneLink=[];
//把style标识中的款式存入,随后删除该标识,但保存第1个
//由于由getElementsByTagName方式回到值是nodeList,因此删掉时循环系统用倒序
for(vari=aStyle.length⑴;i>⑴;–i){
varo=aStyle[i];
aCssText.push(o.innerHTML);
if(i>0){
o.parentNode.removeChild(o);
}
}
//在IE中仅有在31以内的link标识才可以根据其styleSheet.cssText获得款式
//没法的获得拷贝到1个数字能量数组aCloneLink中
for(vari=aLink.length⑴;i>⑴;–i){
varo=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);
}
}
}
varoHead=document.getElementsByTagName(’head’)[0];
//根据前面的删掉,前31个link或style标识数最多只剩余2个
//根据再次提升link连接点的方式激活其styleSheet特性,从而获得款式
for(vari=aCloneLink.length⑴;i>⑴;–i){
varo=aCloneLink[i];
oHead.appendChild(o);
aCssText.push(o.styleSheet.cssText);
oHead.removeChild(o);
}
//把全部的款式都拷贝给第1个标识
aSheet[0].cssText =aCssText.join(”);
}
上面仅仅是1个简易的不光滑的处理计划方案,能够改善的地区也有:
  1、沒有考虑到media这个特性,假如有好几个media应当各自合拼,自然更沒有考虑到link标识的rel="alternatestylesheet"带来的危害。但我更提议根据@media命令把相应的款式写在同1个文档中,最少能够降低HTTP联接数。
  2、沒有处理@import命令31次限定的难题,实际上能够提取其href值随后开展激活解决。可是具体运用在提议用link标识来取代@import命令,应为在IE中@import命令非常与把link标识写在文本文档的底部。
  3、1般来说网页页面之全部出現很多的link或style标识极可能有许多是同样的,能够在aCssText合拼前除掉同样的项,降低编码量。
上一篇:怎样完成FireFox文字全自动换行 返回下一篇:没有了