CSSで擬似フレームにトライしていたところ、森下屋さんから情報をいただき、そこから派生しまして、IEだけにCSSを適用する方法をまとめてきました。
サンプルは記事の一番最後にあります。
アンダースコアハック
プロパティ名の先頭にアンダースコアを記述することでIEに適用することが出来ます。IE6のみでIE7には適用しません。
スターHTMLハック
属性の前に *html を記述することでIEのみに読み込ませることが出来ます。IE6のみでIE7には適用しません。
CSSの親子関係の解釈の違いでIEだけ適用されます。考え方はたぶんこういう考えだと思います。
スターハック
スターHTMLハック改
勝手に命名してますが（汗）、上のスターハックの仲間です。属性の前に *+html を記述することでIEのみに読み込ませることが出来ます。こちらはIE6ではなくIE7のみに適用します。
スターHTMLハックを組み合わせると、IE6、IE7、FirefoxとでCSSを別々に適用することが出来ます。
ただ、これはあくまでもハックなので、正道はないのか？と探すと
ありました。
コンディショナルコメント
マイクロソフトが推奨しているIEのみ読み込みさえるパースです。これを使って外部スタイルシートの読み込みをさせます。以下のように書きます。
IE6だけに読み込ませたい場合
<!--[if IE 6 ]>
<link rel="stylesheet" href="ieonly_ie6.css" type="text/css" />
<![endif]-->
IE7だけに読み込ませたい場合
<!--[if IE 7 ]>
<link rel="stylesheet" href="ieonly_ie7.css" type="text/css" />
<![endif]-->
CSSは上から順番に適用されるので、IE6、IE7の差分だけ別スタイルシートに出して、上のように読み込ませればOKです。
今回参考にさせていただいたサイト
IEだけに特別なCSSを適用させる方法
私が適当にまとめた「IEのみ系」CSSハック。
スターハック
コンディショナルコメント
サンプル
今回の確認のための使ったHTML、CSSのサンプルです。
サンプル
確認は、WindowsXP IE6、WindowsXP Firefox3、WindowsVista IE7 で行いました。Macは持ってないので確認してません。Macの結果をいただけたらうれしいです。
以下、サンプルのコードです。
ieonly.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>IEだけにCSSを適用</title>
<style type="text/css">
body {
font-size:small;
}
div {
height:60px;
padding:10px;
margin-bottom:10px;
}
h2 {
margin:0px;
padding:0px 0px 10px 0px;
font-size:medium;
}
span {
font-size:x-small;
color:#aaaaaa;
margin-left:5px;
}
#main1 {
background:#ccffcc;/*緑*/
_background:#ffff99;/*黄色*/
}
#main2 {
background:#ccffcc;/*緑*/
}
*html #main2 {
background:#ffff99;/*黄色*/
}
#main3 {
background:#ccffcc;/*緑*/
}
*+html #main3 {
background:#ffcc99;/*オレンジ*/
}
#main4 {
background:#ccffcc;/*緑*/
}
*html #main4 {
background:#ffff99;/*黄色*/
}
*+html #main4 {
background:#ffcc99;/*オレンジ*/
}
#main5 {
background:#ccffcc;/*緑*/
}
</style>
<!--[if IE 6 ]>
<link rel="stylesheet" href="ieonly_ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7 ]>
<link rel="stylesheet" href="ieonly_ie7.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="main1">
<h2>1.アンダースコアハック _</h2>
IE6：黄色／IE7：緑／Firefox：緑<br />
IE6のみ適用
</div>
<div id="main2">
<h2>2.スターHTMLハック *html</h2>
IE6：黄色／IE7：緑／Firefox：緑<br />
IE6のみ適用
</div>
<div id="main3">
<h2>3.スターHTMLハック改<span>勝手に命名…</span> *+html</h2>
IE6：緑／IE7：オレンジ／Firefox：緑<br />
IE7のみ適用
</div>
<div id="main4">
<h2>4.スターHTMLハックとスターHTMLハック改を組み合わせる</h2>
IE6：黄色／IE7：オレンジ／Firefox：緑<br />
IE6、IE7に適用
</div>
<div id="main5">
<h2>5.コンディショナルコメント</h2>
IE6：黄色／IE7：オレンジ／Firefox：緑<br />
IE6、IE7に適用
</div>
</body>
</html>
ieonly_ie6.css
#main5 {
background:#ffff99;/*黄色*/
}
ieonly_ie7.css
#main5 {
background:#ffcc99;/*オレンジ*/
}
コメントする