index |

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

コンニチハコンニチハ

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

てすと

【注】IEは別CSSで(主な)ブロックレベル要素はすべて width:100%;

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

div.contentswidth を指定しない

prewidth を指定しない

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_ie8.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="conditional_quirks_ie6.css" />
<![endif]-->

(今のところ)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%;)

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


Written by yassy