index |

コンディショナルコメント (IE8)【標準モード】

コンニチハコンニチハ

IE5対策
  • head要素に【コンディショナルコメント】記述
  • IE5に互換モード用別CSSを適用
IE6,IE7対策
  • mainboxにbackground-colorを付ける
  • sidemenuにはbackground-colorを付けない

てすと

【注】IE5はIE6/7互換モード用CSSで(主な)ブロックレベル要素はすべて width:100%;

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%;)

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


Written by yassy