新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
【CSS】IE10とIE11の表示が他のブラウザと違う場合のCSSハック

コーディングをしていると時々、一部のブラウザのみで、想定と違う表示になってしまう場合があります。

そのほとんどが「まるで違う」というより「微妙なズレ」という程度のものではないでしょうか。

一部のブラウザで表示がズレている場合、一般的には「CSSハック」と呼ばれる、そのブラウザのみで適用される特殊なCSSの記述形式を用いるのが一般的です。

今回はその中で「Internet Explorer 10(IE10)」と「Internet Explorer 11(IE11)」が対象のCSSハックをご紹介します。

この記事の目次

IE10だけに適用されるCSS

IE10のみにスタイルを適用させる場合は、適用させたいスタイルを[@media all and (-ms-high-contrast:none) { … }]で囲う必要があります。

@media all and (-ms-high-contrast:none) {
	.className {color: #ff0000}
}

この状況で[className]というクラス名がついた要素は、IE10のみで赤い(#ff0000)文字色になっているはずです(^^)

ページの先頭へ戻る

IE11だけに適用されるCSS

IE11のみにスタイルを適用させる場合は、まず適用させたいスタイルを[@media all and (-ms-high-contrast:none) { … }]で囲います。

続いて、囲われた最初の1行に[*::-ms-backdrop,]という記述を追加する必要があります。

そうすると、囲われた部分のスタイル定義はIE11のみに適用されます。

@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop,
	.className {color: #ff0000}
}

この状況で[className]というクラス名がついた要素は、IE11のみで赤い(#ff0000)文字色になっているはずです(^^)

ページの先頭へ戻る

IE10とIE11だけに適用されるCSS

さて、IE10とIE11の両方にスタイルを適用させたい場合は、どうすればいいのでしょう??

そのような場合は、下記の記述が役に立つはずです。

メディアクエリの部分がちょっと長めですが、これでいけるかと思います。

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.className {color: #ff0000}
}

この状況で[className]というクラス名がついた要素は、IE10とIE11で赤い(#ff0000)文字色になっているはずです(^^)

ページの先頭へ戻る

この記事の感想をお寄せください

[【CSS】IE10とIE11の表示が他のブラウザと違う場合のCSSハック]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

いいね!と思っていただけたらSNSでシェアしてください♪

関連記事一覧:【CSS】IE10とIE11の表示が他のブラウザと違う場合のCSSハック

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。 それらを実現している要素は「jQuery&CS …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ