Home > CSS > Jvascript > php > flash > cgi > MySql> Wp> M_formats> T_Design> Parts> Art> Hack> Profile> Renewal> Site Map> Verification

★備忘録→ 01IE5.5 > 02IE6 > 03IE7 > 04IE8 > 05MacIE4/5 > 06fox > 07Safari > 08Opera END

03Hack(Windows Internet Explorer/IE7)

★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;
}