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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

【CSS】IE10とIE11の表示が他のブラウザと違う場合のCSSハック

2018.2.2 2019.1.10

【CSS】IE10とIE11の表示が他のブラウザと違う場合のCSSハック
Web制作 0 0

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

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

一部のブラウザで表示がズレている場合、一般的には「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)文字色になっているはずです(^^)

ページの先頭へ戻る

0 0

メールマガジンでWeb制作の情報を購読!

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「ホームページ・ブログ・SNSって、どんな内容を投稿すれば良いの!?」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ