★備忘録→ 01IE5.5 > 02IE6 > 03IE7 > 04IE8 > 05MacIE4/5 > 06fox > 07Safari > 08Opera END
03Hack(Windows Internet Explorer/IE7)
IE7で使えるHackとサンプル例
●IE 7 スターハック
●アスタリスクハック
●ハッシュハック
●条件コメントを使う方法
●CSS使用例
END
★IE 7 スターハック
IE 7 Star Hack IE 7のみ適用します。使用方法は、適用させたいセレクタの前に「*:first-child+html」に記述するだけです。 :first-child疑似クラスをスター+ハック(*+html)に追記することにより、IE 7のみに適用することが可能となりました。 IE 7以外は読み込まれないので、使い勝手がよく、よく使われるハックの1つです。 CSS Validatorに通る。
■ 構文
*:first-child+html p {
color: #f00;
}
★アスタリスクハック
Asterisk Hack
*property
IE 7以下に適用します。使用方法は、IE 6/7に適用させたいプロパティの前に「*」を追記するだけです。
このハックは、W3C CSSバリデーションではエラーになってしまいますが、IE 6用の「* html(スターハック)」
やIE 7用の「*:first-child+html(IE 7 スターハック)」を使用するのに比べ、コードが短くて済むというメリットがあります。
■ 構文
p {
*color: #f00;
}
★ハッシュハック
Hash Hack IE 7以下で適用します。使用方法は、IE 6/7でのみ適用させたいプロパティの前に「#(ハッシュ)」記号を記述するだけです。 W3C CSSバリデーションは通らないので、ほかの指定方法で記述するのが好ましいでしょう。
■ 構文
p {
#color: #f00;
}
★条件コメントを使う方法
条件コメントを使う方法
<!--[if ie 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
IE7.js
<!--[if lt IE7]>
<script type="text/javascript" src="http://ie7-jp.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->
IE8.js
<!--[if lt IE8]>
<script type="text/javascript" src="http://ie7-jp.googlecode.com/svn/version/2.0(beta3)/IE8.js"></script>
<![endif]-->
<!--[if ie 7]>
<style type="text/css">
body {color: #000000; }
</style>
<![endif]-->
特定のバージョンのみ
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
特定のバージョン以上
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7-8.css" />
<![endif]-->
特定のバージョン以上
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6-5.css" />
<![endif]-->
CSS使用例
/* IE 7の「hasLayout」問題を解決 */
*:first-child+html * {
letter-spacing: 0;
}
★chap10_sports-standards_ie7.css
/* リセット的なスタイル */
*:first-child+html body {
letter-spacing: 0; /* IE 7のhasLayout問題を解決*/
}
/* IE 7でのズレや崩れの調整 */
*:first-child+html #search form dd input {
margin-top: -1px; /* ネガティブマージンで位置調整 */
}
*:first-child+html #global-nav {
top: 278px; /* base.cssでは279px */
height: 54px; /* base.cssでは53px */
}
★chap05_p181_choco-mint_ie7.css
*:first-child+html #header h1 {
padding-top: 0.38em;
}
*:first-child+html #header h1 a img {
width: 5.05em;
height: 0.88em;
}
*:first-child+html * {
font-family: "メイリオ", Meiryo, sans-serif;
letter-spacing: 0;
}
*:first-child+html body {
letter-spacing: 0;
}
*:first-child+html #other-contents .section-lv2 {
zoom: 1;
}
*:first-child+html body {
letter-spacing: 0;
}
*:first-child+html li {
margin-top: -1px;
padding-bottom: 1px;
}
*:first-child+html * {
letter-spacing: 0;
}
*:first-child+html #search li {
top: 18px;
}
*:first-child+html * {
font-family: "メイリオ", Meiryo, sans-serif;
letter-spacing: 0;
}
*:first-child+html body {
letter-spacing: 0;
}
*:first-child+html #global-nav {
top: 278px;
}
*:first-child+html #global-nav {
height: 54px;
}