CSS スタイルシートに関する IE の制限と解決策-CSSチュートリアル-php.cn

CSS スタイルシートに関する IE の制限と解決策

一个新手

リリース： 2017-10-19 10:38:58

オリジナル

2264 人が閲覧しました

HTML ドキュメントを CSS に関連付けるには、次の 4 つの一般的な方法があります:

リンクタグを使用する

<link rel="stylesheet" type="text/css" href="sheet.css" />

ログイン後にコピー

スタイル要素を使用する

<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 属性を使用したインラインスタイルの使用は非推奨として標準化されています。理由は非常に簡単です。これは font タグよりもはるかに優れており、ドキュメント全体の外観を一元的に制御する CSS の利点が弱まってしまいます。最初の 3 つの方法はリンクタグとスタイルタグを使用し、IE (IE6、IE7、IE8 ベータ 1 を含む) では次の制限があります。

ドキュメント内の最初の 31 個のリンクタグまたはスタイルタグに関連付けられた CSS のみを使用できます。適用済み。
32日よりタグに紐付けられたCSSが無効となります。 IE の公式ドキュメント「HTML ページの最初の 30 個のスタイルタグ以降のすべてのスタイルタグは Internet Explorer では適用されない」にも、.xsl を使用する .xml ファイルでのこの制限を含め、この制限についても言及されています。しかし、数量を間違えて書いてしまったようです。 IEでご覧ください:
例1: 34個のスタイルタグが同時に適用されます
例2: 1個のスタイルタグと34個のリンクタグが同時に適用されます
スタイルタグには最初の31個のみが含まれます回 @import< /code> コマンドが効果的に適用されます。 <code>@import指令有效应用。
从第32个@import指令开始忽略。请看：
例3：在一个style标记中使用34次@import指令。
一个css文件只有前31次@import指令有效应用。
从第31个@import指令开始忽略。请看：
例4：用link标记引入一个使用34次@import指令的css文件
例5：用style标记引入一个使用34次@import指令的css文件
例6：用link和style标记分别引入一个使用31次@import指令以上的css文件
一个CSS文件的不能超过288kb？
这个消息来自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中，可以通过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(&#39;style&#39;),
    aLink  = document.getElementsByTagName(&#39;link&#39;);
    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(&#39;rel&#39;)===&#39;stylesheet&#39;){
               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(&#39;head&#39;)[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(&#39;&#39;);
}

ログイン後にコピー

上面仅仅是一个简单的粗糙的解决方案，演示请看例1和例2，可以改进的地方还有：

没有考虑media这个属性，如果有多个media应该分别合并，当然更没有考虑link标记的rel="alternate stylesheet"带来的影响。但我更建议通过@media指令把相应的样式写在同一个文件中，至少可以减少HTTP连接数。
没有解决@import指令31次限制的问题，其实可以提取其href值然后进行激活处理。但是实际应用在建议用link标记来替代@import指令，因为在IE中@import指令相当与把link标记写在文档的底部，会导致在IE5/6页面加载时瞬间无样式问题，学名叫“Flash of Unstyled Content”（简称为FOUC）的bug，当然可以通过在文档头中放一个link或script元素可以避免这个bug。
一般来讲页面之所有出现大量的link或者style
🎜 32 番目の @import ディレクティブ以降は無視します。参照してください: 🎜🎜例 3: style タグ内で @import ディレクティブを 34 回使用します。 🎜🎜🎜🎜🎜 CSS ファイルは、最初の 31 個の @import 命令に対してのみ有効です。 🎜🎜🎜 31 番目の @import ディレクティブ以降は無視します。参照してください: 🎜🎜例 4: link タグを使用して、@import ディレクティブを 34 回使用する CSS ファイルを導入します🎜🎜例 5: style タグを使用して、@import 34 回 >コマンド CSS ファイル 🎜🎜例 6: link タグと style タグを使用して、@import コマンドを 31 回以上使用する CSS ファイルを導入します 🎜🎜🎜🎜 🎜CSS ファイルは 288kb を超えることはできません? 🎜🎜🎜このニュースは、Internet Explorer の CSS ファイルサイズ制限に関するものです。 🎜🎜🎜🎜🎜 @import ディレクティブのカスケード制限は 4 レイヤーを超えることはできません。🎜🎜🎜IE で @import ディレクティブを介して CSS ファイルを導入する場合、5 番目のレイヤーは無効になります。この制限は、@import ルールによるカスケード制限から取得されます。実際、ブラウザのマルチレベルのネストのサポートが不完全なため、CSS ファイルを導入するために @import ディレクティブを使用する必要がある場合でも、2 レベルを超えないようにしてください。 🎜🎜🎜🎜 CSS に関する IE の制限は、ほとんどの場合は発生しません。たとえ最適な解決策が見つかったとしても、http リクエストの数を最小限に抑えるために、CSS ファイルと応答タグを手動でマージする必要があります。ページレンダリングを最適化するための最初の原則。 🎜🎜 IE では、インラインスタイルと埋め込みスタイルの値は、document.styleSheets オブジェクトを通じて変更できます (Firefox、Opera9、Safari3.1 でサポート)。このオブジェクトは、ドキュメントにスタイル要素またはリンク要素が含まれている場合にのみ使用できます。実際、document.styleSheets.length を使用すると、IE での最大値が 31 であることがわかります。以下は、JavaScript を使用して link タグと style タグをマージし、IE での制限を解決しています: 🎜rrreee🎜 上記は単なる単純かつ大まかな解決策です。デモとしてご覧ください。例 1 を参照してください。例 2 と同様に、改善できる点があります。 🎜🎜🎜🎜 属性 media が考慮されていませんでした。複数の media がある場合、それらをマージする必要があります。もちろん、link の rel="alternate stylesheet" タグの影響は別です。ただし、@media ディレクティブを使用して、同じファイル内に対応するスタイルを記述することをお勧めします。そうすることで、少なくとも HTTP 接続の数を減らすことができます。 🎜🎜🎜🎜 では @import 命令の 31 回制限の問題は解決されません。実際には、その href 値を抽出してアクティブにすることができます。ただし、実際のアプリケーションでは、link タグを使用して @import ディレクティブを置き換えることをお勧めします。IE の @import ディレクティブは、次の場所にリンクタグを記述するのと同等であるためです。ドキュメントの下部。IE5 /6 では問題が発生します。ページが読み込まれるときにスタイルの問題は発生しません。学名は「Flash of Unstyled Content」（FOUC と呼ばれます）のバグです。ドキュメントヘッダーにリンクまたはスクリプト要素を配置することで回避できます。 🎜🎜🎜🎜一般的に、ページに多数の link タグまたは style タグが表示される場合、それらの多くは同じである可能性が高く、同じものを削除できます。 aCssText をマージする前の項目のコード量を減らします。 🎜

DOM 内の既存のスタイル要素を使用せず、cssText 属性を通じてスタイルコードを直接追加するのではなく、追加する新しいスタイル要素を作成する場合は、必ず最初に新しいスタイル要素を DOM に追加してください。次に、cssText 属性を通じてスタイルコードを追加します。逆に、追加されるスタイルコードは、追加される前に IE6 のスタイルパーサーによって解析されるようです。そのため、!imporant も Hack も無効になります。例 7を参照してください。新しいスタイル要素を追加して新しいスタイルを追加することは、IE の制限に簡単に到達する可能性があるため、お勧めできません。

以上がCSS スタイルシートに関する IE の制限と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。