IEのCSSスタイルテーブルに対する制限と解決策
4751 ワード
もっと読む
HTMLドキュメントとCSSとの関連には4つの方法があります.は、linkタグ を使用する..style要素 .@importコマンド を使用します. style属性を使用したインライン・スタイル 実際のアプリケーションでは、style属性を使用したインラインスタイルは推奨されていません.XHTML 1.1は、その標準を使用することを推奨していません.その理由は簡単です.このような方法は、fontタグよりも多少強くなく、CSS集中制御全体のドキュメントの外観の利点を弱めています.最初の3つの方法は、IE 6、IE 7、およびIE 8 beta 1を含むlinkタグおよびスタイリングマークを利用する.ドキュメントには、前31のlinkまたはstyleタグが関連付けられたCSSのみが適用されます.32番目からマーク関連CSSは無効になります.IEの公式文書All style tags after the first 30 style tags on HTML page are not appied in Internet Explorerもこの制限に言及しています.使用中、xslの.xmlファイルもこの制限があります.しかし、数を間違えたようです.IEで見てください.例1:34のstyleタグと同時に適用例2:1のstyleタグと34のlinkタグが同時に適用されます. のstyleフラグは前の31回だけ cssファイルは前の31回@import命令のみ有効に適用されます.31番目@importコマンドから無視します.34回の をステッカーで導入した. CSSファイルの288 kbを超えてはいけませんか?このニュースはInternet Explorer CSS File Size Limitから来ました. @import指令下の層の畳み制限が4層を超えてはいけません.IEの下で@import命令によってcssファイルを導入すると、第5層は無効になります.この制限はCascade limit via@import ruleから来ます.実際には、ブラウザの多層ネストへのサポートが不完全であるため、やむを得ず@importコマンドを使ってCSSファイルを導入しても、2層を超えてはいけない. IEのCSSに対する制限は、ほとんどの場合、出会うことはない.最良の解決策があっても、手動またはバックエンドプログラムを介してCSSファイルと応答のタグを統合するべきであり、最小のhttp要求数は、ページプレゼンテーションを最適化する第一の原則である.
IEでは、インラインおよび埋め込みスタイルの値は、は、 @importコマンド31回の制限が解決されていません.実は、href値を抽出して、活性化処理を行うことができます.しかし、実際のアプリケーションでは、@importコマンドの代わりに 一般的には、ページのすべてが大量に
HTMLドキュメントとCSSとの関連には4つの方法があります.
を使用する
@import
コマンド有効アプリケーションです.32番目@importコマンドから無視します.参照してください.例3:styleタグの中で34回@import
コマンドを使用します.@import
コマンドを使用したcssファイル例5をlinkタグで導入した:34回の@import
コマンドを使用したcssファイル例6:それぞれ31回の@import
コマンドを使用したcssファイルIEでは、インラインおよび埋め込みスタイルの値は、
document.styleSheets
オブジェクト(Firefox、Opera 9およびSafari 3.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接続数を減らすことができます.link
タグを使用することを提案しています.これは、IE 5/6ページの読み込み時に、リンクをドキュメントの底にマークするのと相当する命令であるため、「Flash of UnistylodContot」(FOUCと略称する)というbugを学ぶことができます.もちろん、このbugは文書の先頭にlinkまたはscript要素を置くことによって避けられます.@import
またはlink
タグを持っている可能性が高いです.多くは同じです.aCssTextを合併する前に同じ項目を削除して、コード量を減らすことができます.