-
久しぶりにie6でレイアウトが崩れたので復習
2011年05月04日
-
IE6はCSSの解釈がおかしい
CSSの解釈がおかしいためレイアウトが崩れ
ボックス幅の解釈
div#box{ width:100px; border:1px solid black; padding:5px; }
ボックス全体の幅は112px→IE6では全体で100pxとなります。
【対策】widthとpadding、borderを一緒に使わない
div#box1{ width:100px; } div#box2{ border:1px solid black; padding:5px; }
例えば分けて指定
floatで回り込むとmarginが2倍に
div#box{ float:right; margin-right:20px; }
通常は20pxが、IE6の場合40pxとなる
【対策】 marginとfloatを使うときはdisplay:inline;を忘れずに
div#box{ float:right; margin-right:20px; display:inline; }
floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。
IE6のCSS対策の最終手段CSSハック
.sample{ width: 100px; _width : 120px; }
この場合、IE6以下のみ120pxとなり、他のブラウザでは100px
.sample{ width: 100px; } * html .sample{ width : 120px; }
こちらも同じで、IE6以下のみ120pxとなり、他のブラウザでは100px
Tag Archives: css hack
-
cssハック css hack – スタイルシート —
2010年04月30日
-
CSS ハック
ブラウザごとの表示の違いを、ブラウザが持っている「バグ」を逆手に取って利用する方法。
CSSハックと呼ばれているもので、あくまでも応急処置的な意味で使う。
*The W3C CSS Validationに通らないものもあります
IE6以下
スターハック
* html #contents { margin:0 0 0 10px; }
対応ブラウザ:IE4~6、MacIE4~5
セレクタの前に【* html 】を挿入
アンダースコアハック
#contents { _margin:0 0 0 10px; }
対応ブラウザ:IE4~6
プロパティ前に【_】アンダースコアを挿入
IE6のみ除外
#contents { color /**/:#000000; }
対応ブラウザ:IE7、IE8、Firefox、Safari、Opera
プロパティ後に【/**/】を挿入
IE7用
*:first-child+html #contents { margin:0 0 0 10px; }
対応ブラウザ:IE7
【*:first-child+html】を挿入
IE6/IE7共通
#contents {/margin:0 0 0 10px; }
対応ブラウザ:IE6、IE7
プロパティの前に【/】を挿入
—————————————————————————-
【追記】
IE8
*+html>/**/body
●●●
IE7
*:first-child+html ●●●