★備忘録→ 01IE5.5 > 02IE6 > 03IE7 > 04IE8 > 05MacIE4/5 > 06fox > 07Safari > 08Opera END
02 Hack(Windows Internet Explorer/IE6)
IE6で使えるHackとサンプル例
●スターハック
●CSS使用例
END
大部分のユーザーに対するコンテンツを作っていかないといけないWebデザイナは、 IE 6で表示がズレないようにHTMLやCSSのコーディングしていくのが仕事です。しかしIE 6の場合は、 仕様通りの正しいコーディングを行っているにもかかわらずレイアウトがズレてしまうことがあります。 これらの問題を解決するために、CSSハックやフィルタという、 IE 6の表示ずれを修正していくテクニックが使われます。
スターハック(IE 6とMac OS XのIE 5に適用。)
・Star HTML Selector Bug
・Star HTML Hack
IE 6とMac OS XのIE 5に適用します。使用方法は、適用させたいセレクタの前に「* html」と記述するだけです。
スター(*)を適用するので、「スターハック」と名付けられました。
適用したいセレクタの前に「* html」を記述することで実装できます。そのほかのモダンブラウザは
「HTMLには親要素がない」と解釈し、「この記述は間違っている」として適用しません。
しかし、IE 6やMac OS XのIE 5は、それを正しいと認識し、適用してしまいます。
このハックは、IE 6のズレを直す際によく使われるハックです。
IE6ハック(Valid)
* html #IE6 { }
Internet Explorer6用ハック
*html セレクタ {.....}
CSS使用例
/* clearfixをIE 6でも効かせる */
* html #container,
* html .section-lv3,
* html #service-seminar .section-lv3 p {
zoom: 1;
}
★chap05_p181_choco-mint_ie6.css
@charset "UTF-8";
* html body {
font-size: 75%; /* 12/16 */
}
* html #header h1 {
padding-top: 0.38em;
}
* html #header h1 a img {
width: 5.05em;
height: 0.88em;
}
★chap10_sports-standards_ie6.css
@charset "utf-8";
/* リセット的なスタイル */
* html body {
font-size: 75%;/* 12px(12/16) */
}
/* IE 6でのズレや崩れの調整 */
/* IE 7と共通の問題 */
* html #search form dd input {
margin-top: -1px; /* ネガティブマージンで位置調整 */
}
* html #global-nav {
top: 278px; /* base.cssでは279px */
height: 54px; /* base.cssでは53px */
}
/* グローバルナビゲーションのボタンの見切れを解消 */
* html #global-nav li {
padding-bottom: 1px;
}
/* 真ん中のカラムの下、「登録はこちら」「詳細はこちら」のスタイル調整 */
* html #service-seminar .btn01 a {
margin-bottom: -20px;
line-height: 1.75;
border-bottom: 1px solid #865000;
}
* html #service-seminar .btn01 a:hover {
color: #ffffff;
border-bottom: 1px solid #861b00;
}
* html * {
font-family: "メイリオ", Meiryo, sans-serif;
}
* html #main-nav ul,
* html #main-nav li a,
* html #footer ul {
zoom: 1;
}
* html #main-nav li a span img {
height: 78px;
}
* html body {
font-size: 75%;/* 12px(12/16) */
}
* html #other-contents .section-lv2,
* html .link-list01,
* html .link-list02 ul {
zoom: 1;
}
* html body {
font-size: 75%;/* 12px(12/16) */
}
* html #global-nav li {
margin-top: -1px;
padding-bottom: 1px;
}
* html body {
font-size: 75%;/* 12px(12/16) */
}
* html #utility-nav {
line-height: 1.2;
}
* html #search li {
top: 18px;
}
* html * {
font-family: "メイリオ", Meiryo, sans-serif;
}
* html #global-nav li {
padding-bottom: 1px;
}
* html #cool-sports .btn01 li a:hover {
color: #fff;
}
* html body {
font-size: 75%;/* 12px(12/16) */
}
* html #container,
* html .section-lv3,
* html #service-seminar .section-lv3 p,
* html .btn01 li a {
zoom: 1;
}
* html #global-nav {
top: 278px;
}
* html #global-nav {
height: 54px;
}