互換モード (IE8)

てすと

• width 指定なし(padding:1em 0;)

1あいうえおかきくけこさしすせそあいうえ
2あいうえおかきくけこさしすせそあいうえ
3あいうえおかきくけこさしすせそあいうえ
4あいうえおかきくけこさしすせそあいうえ
5あいうえおかきくけこさしすせそあいうえ

問題点

• IE6 -
  1. width の計算がおかしい
  2. overflow 無視（「はみ出し」せずに、親要素を広げてしまう）
  3. 左右 margin:auto 無効
  4. border,background-colorが消えることがある
  5. サイドバーの背景色が文字のある部分のみ
• IE7 -
  1. width の計算がおかしい
  2. overflow 無視（「はみ出し」せずに、親要素を広げてしまう）
  3. 左右 margin:auto 無効
  4. border,background-colorが消えることがある
  5. サイドバーの背景色が文字のある部分のみ
• Firefox2 -
• Opera9 (Windows) -
  1. width の計算がおかしい（IEと同じ）

overflow 確認

width 指定なし - overflow:auto;(padding:1em 0;)

1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ

width 指定なし - overflow:auto;(padding:1em 0;)

1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ

Firefox2,Opera9 - 横スクロールバーはboxの高さにプラス

width 指定なし - overflow:scroll;(padding:1em 0;)

1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ

縦スクロールバーは margin,width にあわせて

Firefox + VL ゴシック（VL Pゴシック）では、不要な縦スクロールバーが出ることがある（上下 padding か line-height 調整で回避）。

width 指定なし - overflow:hidden;(padding:1em 0;)

1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ