CSS ハックを使用して Internet Explorer 11 専用に要素をスタイル設定する方法

CSS ハックで Internet Explorer 11 をターゲットにする方法

CSS ハックを使用すると、Internet Explorer 11 などの特定のブラウザをターゲットにできます。 IE 11 用の CSS ハックの作成に役立つガイドを次に示します。

特に IE 11 をターゲットにするには、Microsoft 固有の CSS ルールを組み合わせて利用できます。 HTML に次のメタ タグを追加します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

CSS で、@media all および (-ms-high-contrast: none) ルールを使用して IE 10 をターゲットにします。このルール内で、クラス .foo.

@media all and (-ms-high-contrast:none) {
  .foo { color: green } /* IE10 */
}

で要素のスタイルを指定できます。IE11 のみを対象にするには、*::-ms-backdrop を使用します。 pseudo-element.

@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .foo { color: red } /* IE11 */
}

この手法は、セレクター (この場合は *::-ms-backdrop) を解析できないユーザー エージェントがセレクターとそれに続く宣言ブロックを無視するため機能します。その結果、IE11 固有のルール内のスタイルは IE11 にのみ適用されます。

コード スニペットの例を次に示します:

  
    
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
  
  
    
Hi There!!!
  

これらの CSS ハックを使用すると、要素を効果的にスタイル設定できます。特に Internet Explorer 11 の場合。

以上がCSS ハックを使用して Internet Explorer 11 専用に要素をスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。