てすと
width:90%
(padding:1em 0;
)
1あいうえおかきくけこさしすせそあいうえ 2あいうえおかきくけこさしすせそあいうえ 3あいうえおかきくけこさしすせそあいうえ 4あいうえおかきくけこさしすせそあいうえ 5あいうえおかきくけこさしすせそあいうえ
1あいうえおかきくけこさしすせそあいうえ 2あいうえおかきくけこさしすせそあいうえ 3あいうえおかきくけこさしすせそあいうえ 4あいうえおかきくけこさしすせそあいうえ 5あいうえおかきくけこさしすせそあいうえ
問題点
- IE6 -
- width の計算がおかしい(100%を指定しないといけない)
- 左右
margin:auto
無効 - サイドバーの背景色が文字のある部分のみ
- IE7 -
- width の計算がおかしい(100%を指定しないといけない)
- 左右
margin:auto
無効 - サイドバーの背景色が文字のある部分のみ
- Firefox2 -
- Opera9 (Windows) -
- width の計算がおかしい(IEと同じ)
overflow 確認
width:100%
(padding:1em 0;
)-
1あいうえおかきくけこさしすせそあいうえ 2あいうえおかきくけこさしすせそあいうえ 3あいうえおかきくけこさしすせそあいうえ 4あいうえおかきくけこさしすせそあいうえ 5あいうえおかきくけこさしすせそあいうえ
width:90%;overflow:auto;
(padding:1em 0;
)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:90%;overflow:auto;
(padding:1em 0;
)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:90%;overflow:scroll;
(padding:0;
)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
Firefox + VL ゴシック(VL Pゴシック)では、不要な縦スクロールバーが出ることがある(上下 padding か line-height 調整で回避)。
width:90%;overflow:hidden;
(padding:0;
)-
width:100%;overflow:auto;
(padding:1em 0;
)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:100%;overflow:auto;
(padding:1em 0;
)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:100%;overflow:scroll;
(padding:1em 0;
)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:100%;overflow:hidden;
(padding:1em 0;
)-