特に一部のプロジェクトでは、1つのファイルの特定のページのスタイルを表示する場合、IEのスタイルを個別のファイルにすることは必ずしも便利ではないためです。
この問題を解決するための2つのオプションを説明します。
1. JavaScriptを使用するオプション：
特定のバージョンのブラウザの名前で本文のクラスを追加します。条件付きコメントは、ユーザーエージェントの誤った認識の問題を取り除くのに役立ちます
<!--[if IE 7]> <script type="text/javascript"> document.body.className='ie7'; </script> <![endif]--> <!--[if IE 8]> <script type="text/javascript"> document.body.className='ie8'; </script> <![endif]-->
この場合、IEのブロックスタイルのみを変更する必要がある場合
<body> <div class="example"> <p> <strong></strong> , </p> </div> </body>
CSSの場合：
.example p{ color: green; } .ie8 .example p{/* IE 8*/ color: yellow; margin-top: 8px; } .ie7 .example p{/* IE 7*/ color: red; margin-top: 5px; } .ie7 .example p strong, .ie8 .example p strong{/* IE 7 IE8*/ color: #000; }
ただし、この方法は、ユーザーがJavaScriptを無効にしている場合など、すべての場合に適しているわけではありません。
2. JavaScriptを使用せず、IEのスタイルを別のファイルに表示しないオプション：
このオプションでは、特定のクラスを使用して本体内または要素自体の周囲にラッパーを作成します。IEのみに表示されます：
<body> <!--[if IE 7]> <div class="ie7"> <![endif]--> <!--[if IE 8]> <div class="ie8"> <![endif]--> <!--[if lt IE 9]> <div class="lte9"> <![endif]--> <div class="example"> <p> <strong></strong> , </p> </div> <!--[if lt IE 9]> </div> </div> <![endif]--> </body>
または、IE 7およびIE 8の共通クラスなしで実行できます
<body> <!--[if IE 7]> <div class="ie7"> <![endif]--> <!--[if IE 8]> <div class="ie8"> <![endif]--> <div class="example"> <p> <strong></strong> , </p> </div> <!--[if lt IE 9]> </div> <![endif]--> </body>
CSSでは、クラスをコンマで区切って指定します。
.example p{ color: green; } .ie8 .example p{/* 8*/ color: yellow; margin-top: 8px; } .ie7 .example p{/* 7*/ color: red; margin-top: 5px; } .ie7 .example p strong, .ie8 .example p strong{ color: #000; }
使用例
PSこの方法は特別なものでもユニークなものでもありませんが、場合によっては便利です。