標準モード (IE7)

てすと

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

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

問題点

• IE6 -
  1. overflow 無視（「はみ出し」せずに、親要素を広げてしまう）
  2. border,background-color が消えることがある
  3. サイドバーの背景色が文字のある部分のみ
  4. overflow のない状態でもなぜか背景色はみだし
• IE7 -
• Firefox2 -
• Opera9 -

overflow 確認

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

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

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

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

Firefox2,Opera9 - 横スクロールバーはboxにプラス、IE7はautoだと高さに含めてしまう。

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あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ