影響版
現れ
32番目以降に来るスタイルは無視されます（<style>、<link>、@importなど）。
チュートリアル開催日
2009 8月12日( 水) 14:58:58
説明
もしあなたがサードパーティの広告やアプリを多く含むウェブサイトを管理しており、これらのサードパーティが独自の<style>（または<link>）要素に依存している場合、この記事のバグはあなたを狂わせるでしょう......。この記事のバグはあなたを狂わせるでしょう......。下のデモを見てから説明しましょう。
デモンストレーション
バグの自然な性質のため、このデモは別のページにあります：
HTMLコード
<style type="text/css"></style> <!--1-->
<style type="text/css"></style> <!--2-->
<style type="text/css"></style> <!--3-->
<style type="text/css"></style> <!--4-->
<style type="text/css"></style> <!--5-->
<style type="text/css"></style> <!--6-->
<style type="text/css"></style> <!--7-->
<style type="text/css"></style> <!--8-->
<style type="text/css"></style> <!--9-->
<style type="text/css"></style> <!--10-->
<style type="text/css"></style> <!--11-->
<style type="text/css"></style> <!--12-->
<style type="text/css"></style> <!--13-->
<style type="text/css"></style> <!--14-->
<style type="text/css"></style> <!--15-->
<style type="text/css"></style> <!--16-->
<style type="text/css"></style> <!--17-->
<style type="text/css"></style> <!--18-->
<style type="text/css"></style> <!--19-->
<style type="text/css"></style> <!--20-->
<style type="text/css"></style> <!--21-->
<style type="text/css"></style> <!--22-->
<style type="text/css"></style> <!--23-->
<style type="text/css"></style> <!--24-->
<style type="text/css"></style> <!--25-->
<style type="text/css"></style> <!--26-->
<style type="text/css"></style> <!--27-->
<style type="text/css"></style> <!--28-->
<style type="text/css"></style> <!--29-->
<style type="text/css"></style> <!--30-->
<style type="text/css"></style> <!--31-->
<style type="text/css">p { border: 5px solid #000; }</style> <!--32-->
<p>I should have borders!</p>
処方
このバグの解決策は以下の通りです。
プログラム
チュートリアル開催日
2009 8.12 15:28:11 Wed.
修正版
影響を受けるすべてのバージョン
説明
実際のウェブ開発でこの問題に遭遇した場合、「少ないスタイル タグ」を使用するオプションがなく、解決策が複雑になる可能性があります。その事実に基づいて、改訂されたデモでは、制約が満たされたときに何が起こるかを示します：
HTMLコード
<style type="text/css">p { border: 5px solid #000; }</style> <!--1-->
<p>I should have borders!</p>
スタイルタグを少なくする」という解決策をとれない場合、問題はさらに複雑になります。最良の解決策は、ポストプロセッサーを使って過剰なスタイルを単一のスタイルに統合することです（例えば、複数の<style>要素のスタイルを単一の<style>要素にまとめる）。
<style>要素が
もしあなたが燃え上がっていて、手っ取り早く修正する必要があるなら、私がバグを発見したページで見つけたjQueryコードの一部を紹介します。私はこのコードをテストしていないので、自己責任で使用してください〜コードは以下のようになります：
$(document).ready(function(){
// If msie and we have more than the allotted stylsheets...
if ( $.browser.msie && $('style').length != document.styleSheets.length ) {
var ssAry = $('style');
// Loop through the extra stylesheets not read and apply the styles found
for ( var i = document.styleSheets.length; i < ssAry.length; i++ ) {
var cssText = ssAry[ i ].innerHTML;
// Replace newlines and then comments
cssTextcssText = cssText.replace(/[
]/g, "");
cssTextcssText = cssText.replace(/\/\*\**[^\*\/]*\*\//g, "");
// Loop over all CSS selector groups...
var regex = new RegExp(/{[^}]*}/);
for ( var value = regex.exec( cssText ); value; value = regex.exec( cssText ) ) {
// Split the css grouping into the selector and the CSS properties
var pair = cssText.substring( 0, regex.lastIndex )
.replace(/}/g, "").split(/{/);
// Add it to the last DOM stylesheet
document.styleSheets[ document.styleSheets.length - 1 ].addRule(
pair[ 0 ].replace(/^\s+|\s+$/g, ""),
pair[ 1 ].replace(/^\s+|\s+$/g, "")
);
// Strip off the applied CSS
cssTextcssText = cssText.substring( regex.lastIndex );
}
}
}
});
このコードをこの問題の恒久的な解決策として使用しないでください。
