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

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ハック]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

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

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

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

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