ホーム > タグ > css

css

IEのバージョン別に読み込むCSSを変える+CSSハックメモ

IEのバージョン別に読み込むCSSを変える
全IE用

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IEには対応させない

<!--[if !IE]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7のみ読み込み

<!--[if IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE6以下のみ読み込み

<!--[if lt IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※lt:Less-Than。つまり、IE7は含まないのでIE6以下。

もしくは

<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※lte:Less-Than or Equal。つまり、IE6を含むので、IE6以下。

IE7以下のバージョンに対応

<!--[if lt IE 8]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

もしくは

<!--[if lte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7以上のバージョンに対応

<!--[if gt IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※gt:Greater-Than。つまり、IE6を含まないのでIE7以上。

もしくは

<!--[if gte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

gte:Greater-Than or Equal。つまり、IE7を含むのでIE7以上。

そして、こんな記事を発見。

【coliss】[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック下記CSSハックメモ

下記のように、CSSファイルを指定した箇所より前に空の条件付きコメント(<!–[if IE]><![endif]–> )を挿入します。

<!--[if IE]><![endif]-->
<link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection">
<link type="text/css" rel="stylesheet" href="print.css" media="print">

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="ie.css" media="screen, projection">
<![endif]-->

ほぉー!!すばらしいですねぇ。

下記CSSハックメモ

IE8のみ適用

html>/**/body selector {
 margin-top/***/: 2px\9;
 padding: 5px;
}

2つめのプロパティからは普通に指定してOK。

IE7のみ適用

*:first-child+html selector {
 margin: 0;
}

IE6のみ適用

_selector {
 margin: 0;
}

最後に、今回、調整していたときに、IE8のみでイメージが3px下にずれて表示されてしまうのでネガティブマージンを指定(margin-top: -3px;)したのだが、うまくいかない…
うー、ネガティブマージンだめなの?と思うも、その他のプロパティだとちゃんと効く…
結論は、今回jqueryのプラグインを使用してスライドショーを実現していたのだが、そのpositionが絡んでいるっぽい。いろいろ試してはみたがうまくいかなかったのでとりあえず、!importantをつけてみたら、うまくいったのでこれでよしとした。

html>/**/body selector {
 top/***/: -3px\9 !important;
}

ふぅー…

Home > タグ > css

want

Return to page top