てすと
【注】IE5はIE6/7互換モード用CSSで(主な)ブロックレベル要素はすべて width:100%;
-
width:86%(padding:1em 2%;)
1あいうえおかきくけこさしすせそあいうえ 2あいうえおかきくけこさしすせそあいうえ 3あいうえおかきくけこさしすせそあいうえ 4あいうえおかきくけこさしすせそあいうえ 5あいうえおかきくけこさしすせそあいうえ
1あいうえおかきくけこさしすせそあいうえ 2あいうえおかきくけこさしすせそあいうえ 3あいうえおかきくけこさしすせそあいうえ 4あいうえおかきくけこさしすせそあいうえ 5あいうえおかきくけこさしすせそあいうえ
う〜ん、IE6では line-height がかなり違う...
コンディショナルコメント
head要素内に記述する。IE5に別スタイルシート(IE6互換モード用)を適用。
link要素で通常CSSを指定、且つコメントでIE用CSSを指定する場合は、別適用ではなくIE用CSSで上書きとなるらしい。
<!--[if lt IE 6]> <link rel="stylesheet" type="text/css" href="conditional_quirks_ie6.css" /> <![endif]-->
overflow 確認
【注】IEは別CSSで(主な)ブロックレベル要素はすべて width:100%;
width:86%;overflow:auto;(padding: 1em 2%;)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:86%;overflow:auto;(padding: 1em 2%;)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:86%;overflow:scroll;(padding: 1em 2%;)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
width:86%;overflow:hidden;(padding: 1em 2%;)-
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ 5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
Firefox + VL ゴシック(VL Pゴシック)では、不要な縦スクロールバーが出ることがある(上下 padding か line-height 調整で回避)。