CSSでIEの特定バージョンだけに対応する簡単な方法

  • 投稿 : 2012-06-16
  • 更新 : 2013-11-10

バージョンベクタ

<!--[if gte IE 8]>
<p>IE 8 以上を使用しています</p>
<![endif]-->

参考:
バージョンベクタ - msdn
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ | コリス

IE7だけカラム落ちする、IE9とIE8で見た目が微妙に違うなどで困っている場合に、簡単に対応する方法があります。バージョンベクタを使う方法です。

上記のように書くと、特定のIEのバージョンだけに読み込ませるように書くことが可能です。これを利用して、特定のIEのバージョンのみに適応するCSSを追加やimportantなどで上書きすることで対応する方法です。

プロでこのような手法を使うのはどうかはわかりませんが、趣味でブログをやっていて困っている場合は暫定的にでも利用すべきだと思います。


このブログの例だと

Bloggerの標準のSimpleというテンプレートをカスタマイズして使ってるのですが、うまくいかない部分があって以下のように対応しています。

IE7のときだけ、右サイドバーのカラムが落ちる

<!--[if IE 7 ]>
<style>
/*sidebarの指定*/
.column-right-outer{
  width: 220px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  left: 730px;
}
</style>
<![endif]-->

IE7とIE8のときだけ、不要な空白(スペース)ができてしまう

<!--[if IE 7 | IE 8]>
<style>
.column-center-outer,.column-right-outer{
  padding-top:0px;
 margin-top:-30px;
 background: #fff;
}
.post-footer-line-1,.post-footer-line-2{
 height:1px;
}
</style>
<![endif]-->

if文の書き方はいろいろありますが、 | で後ろに付け足す形で書くのが楽だと思います。|はor(または)という意味です。

スポンサーリンク