WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

cssレイアウト崩れの原因 — バグ回避方法 —

2010年05月07日

投稿者: TORAT

● フォントサイズ

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;指定が完全に反映されない

この記事の投稿者

管理者

TORAT

Flashの上に画像 swfファイルの上に画像

2010年10月15日 TORAT

【CSSでできる!】hoverで画像を変える方法

2020年1月8日 TORAT

2020年5月10日 ヨッシー

久しぶりにie6でレイアウトが崩れたので復習

2011年5月4日 TORAT

ブログ一覧へ

書いた人

WRITERS