index |

互換モード【修正版】[_width] 指定

コンニチハコンニチハ

IE6,IE7対策
  • mainboxにbackground-colorを付ける
  • sidemenuにはbackground-colorを付けない

てすと

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

互換モード用モード修正

Opera9 対策

width を指定しない。(IE6/7 向けに_width を指定する)

IE6,IE7対策

IE6,IE7の互換モードでは、(左右)margin:auto が効かないので左右の margin を等しく指定(左右 margin があるのになぜか _widthは100%

  1. カラムを調整
  2. 他のブロックレベル要素もまとめて _width:100% を指定
.mainbox-quirks {
position:relative;
margin: 1% 4%;
_width: 100%;
background-color: #f1f1f1;
border-style: solid;
border-width: 1px;
border-color: #fff #ccc #ccc #fff;
}

.contents-quirks {
margin: 0 25% 0 0;
padding: 0 2% 1%;
_padding: 0 2.5% 1%;
background-color: #fff;
_width: 100%;
}

.sidemenu-quirks {
position:absolute;
margin: 0;
padding: 1%;
_padding: 4%;
top: 0;
left: 75%;
right: 0;
bottom: 0;
width: 23%;
_width: 25%;
}
.header-quirks ul,
.header-quirks ul ul,
.mainbox-quirks ul,
.mainbox-quirks ol,
.mainbox-quirks dl,
.mainbox-quirks dt,
.mainbox-quirks dd,
.mainbox-quirks h2,
.mainbox-quirks h3 {
_width: 100%;
}

preにも_width: 100%;を指定。IEの1行 pre overflow 対策として上下 padding に1em

.contents-quirks pre {
margin: 0 5% 2%;
padding: 1em 2%;
overflow:auto;
white-space: pre;
background-color: #f1f1f1;
_width: 100%;
line-height: 1.1;
}

_width は他のブラウザでは無視される

overflow 確認

_width:100%;overflow:auto;(padding:1em 2%;)
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
_width:100%;overflow:auto;(padding:1em 2%;)
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
_width:100%;overflow:scroll;(padding:1em 2%;)
1あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
2あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
3あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
4あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ
5あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこ

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

_width:100%;overflow:hidden;(padding:1em 2%;)

Written by yassy