てすと
【注】IEは別CSSで(主な)ブロックレベル要素はすべて width:100%;
- width指定なし -
margin: 0 5% 2%;
(padding: 1em 2%;
)
1あいうえおかきくけこさしすせそあいうえ 2あいうえおかきくけこさしすせそあいうえ 3あいうえおかきくけこさしすせそあいうえ 4あいうえおかきくけこさしすせそあいうえ 5あいうえおかきくけこさしすせそあいうえ
1あいうえおかきくけこさしすせそあいうえ 2あいうえおかきくけこさしすせそあいうえ 3あいうえおかきくけこさしすせそあいうえ 4あいうえおかきくけこさしすせそあいうえ 5あいうえおかきくけこさしすせそあいうえ
- リスト
- ネスト
- nest
- list
- LIST
- Opera向け
-
div.contentsに width を指定しない
pre に width を指定しない
- IE6/IE7向け
-
(別CSSで)主なブロックレベル要素にwidth:100%を指定。カラムの margin , padding を微調整。
コンディショナルコメント
head要素内に記述する。IE7とIE6を別のスタイルシートへ。
link要素で通常CSSを指定、且つコメントでIE用CSSを指定する場合は、別適用ではなくIE用CSSで上書きとなるらしい。
<!--[if gte IE 8]> <link rel="stylesheet" type="text/css" href="conditional_quirks_ie8.css" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="conditional_quirks_ie7.css" /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="conditional_quirks_ie6.css" /> <![endif]-->
- conditional_quirks.css
- conditional_quirks_ie8.css
- conditional_quirks_ie7.css
- conditional_quirks_ie6.css
(今のところ)IE用はどれも同じ内容。
overflow 確認
【注】IEは別CSSで(主な)ブロックレベル要素はすべて width:100%;
- width指定なし -
margin: 0 5% 2%;overflow:auto;
(padding: 1em 2%;
) -
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
- width指定なし -
margin: 0 5% 2%;overflow:auto;
(padding: 1em 2%;
) -
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
- width指定なし -
margin: 0 5% 2%;overflow:scroll;
(padding: 1em 2%;
) -
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
- width指定なし -
margin: 0 5% 2%;overflow:hidden;
(padding: 1em 2%;
) -
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
Firefox + VL ゴシック(VL Pゴシック)では、不要な縦スクロールバーが出ることがある(上下 padding か line-height 調整で回避)。