-
久しぶりに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
-
cssレイアウト崩れの原因 — バグ回避方法 —
2010年05月07日
-
● フォントサイズ
font-sizeは%かpxで指定
【バグ対象ブラウザIE6】
⇒ キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる ⇒
em単位で指定した値が文字サイズ変更後に正しく反映されない
● ボックス
widthと同時に左右brderや左右paddingを指定しない
heightと同時に上下brderや上下paddingを指定しない
⇒ ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう
【バグ対象ブラウザIE5.5,IE6】
⇒ 左右ボーダーとパディングを設置した要素に後続する部分がずれる body要素にはborderやwidthを指定しない。
⇒ 初期コンテナブロックを生成する要素の幅を指定できない
● 視覚的
フロートのコンテナブロックにはwidthを指定
【バグ対象ブラウザ IE5.5,IE6】
⇒ 背景色が指定された要素内にフロートがあるときに要素内の文字が消える
⇒ フロートを含むボックスのマージンが無視される
左フロートの左marginはゼロにする
右フロートの右marginはゼロにする
【バグ対象ブラウザ IE5.5,IE6】
⇒ フロートの左右マージンが指定値より大きくなる
clearしていないブロックボックスにはwidthもheightも指定しない
【バグ対象ブラウザ IE5.5,IE6】
⇒ フロートに後続するボックスの幅がフロートに合わせて短縮される
clearするボックスの上marginはゼロ
【バグ対象ブラウザ IE5.5,IE6】
⇒ clearを指定した要素ではフロートに対して上マージンを設置する
clearするボックスには同時にwidthも指定
絶対配置要素のコンテナブロックにはwidthを指定
絶対配置要素の位置指定はtopとleftまたはrightとbottomで行う。
leftとrightやtopとbottomを同時指定しない。
【バグ対象ブラウザ IE6】
⇒ left, topが指定された要素ではright, bottomを認識しない
verflwを使うときは同時にwidthやheightを指定する
⇒ 幅と高さが明示されていない要素へのverflow:hidden;指定が完全に反映されない