【ブラウザ】IEのデザインが楽になる!!IEだけ効くバックスラッシュが超便利!!

IEでのみ適用されるバックスラッシュ

例えばWEBフォントの一つである「Noto Sans Japanese」をIE(Internet Explorer)で使用すると、文字がline-heightの高さの上側にずれてしまいます。
Notoフォントに限らず作成したHTMLをIEで見ると、ところどころ余白などの大きさが不自然にずれる現象が多く見られます。

悩みの種ですがIEで起こるズレは補正しなければなりません。

今回は、ベンダープレフィックス (webkitとか)を使わずに IEでのみ適用される特殊なCSSの書き方を紹介します。

末尾にバックスラッシュ(または¥マーク)と0をつける

paddingやmarginなどのプロパティの値には数値を指定します。

その値の末尾にバックスラッシュ(または¥マーク)と0をつけるとchromeやfirefoxはコメントアウト扱いになるのですが、IEだけは読み込まれます

以下のCSSを見てみます。

2行目の「padding: 15px;」によって上下左右に15pxのpaddingがかかっています。

3行目のバックスラッシュ(または¥マーク)と0が付いている方は、「padding: 15px 0 0;」に¥0をつけているので、IEでみると3行目がコメントアウトされて4行目のpaddingが効きます

  • ChromeやFirefox → 3行目の「padding: 15px;」が効いて4行目はコメントアウト。
  • IE → 3行目はコメントアウトされて、4行目の「padding: 15px 0 0;」が効く。

このCSSは「chromeやfirefoxでは上下左右に15pxつけたいが、IEでは上側だけに15pxつけて下左右は0pxにしたい」というコードです。

セレクタに書かれているプロパティにおいて、末尾にバックスラッシュ(または¥マーク)と0が付いている方と付いていない方がある場合、IEでは¥0が付いている方を優先します。

paddingだけではありません。marginやfont-sizeやline-heightなど数値を指定するプロパティに適用できます。
どんな単位の量でも構いません。

補足

例えば以下のようなCSSの場合、

これだけなら、ChromeやFirefoxではコメントアウトされて適用されないのですが、IEだけは「padding: 15px;」が適用されます。