IE7のバグ、トラブル回避策

IE6と格闘する日々は以前より少なくなりましたが、ここ最近はIE7やIE8の新たな問題に直面することが多くなったように感じます。

そこで「IE6のバグ、トラブル回避策」に続き、IE7のバグ、トラブル回避策をこのページにまとめます。

あと何年経てば、このIEの呪縛から解放されるんですかね。

「display: inline-block;」が効かない

IE7以下ではdisplayにinline-blockは使用できません。
そこでIE7以下のハックでinlineを指定します。

.sample ul li{
	display: inline-block;
	/display: inline;
	/zoom: 1;
}

例えばfloatを用いない回り込みなどもこれで解決できます。
この時、わずかなズレが発生するのでzoomの指定も忘れないように。

tableでセルのwidthを指定しても効かない場合があります。
これはバグというより、厳密にはIEの仕様としては正しいみたいですが。。。
モダンブラウザとは違う挙動をするので困ります。

このような場合は以下のようにしてあげれば、IE7でも幅指定ができるようになります。

table{
	table-layout: fixed;
}

実際にこのページを各ブラウザで確認してもらえれば分かりますが、「table-layout: fixed;」を指定すると、IEでもwidth指定が有効になります。

width: 100px;	width指定なし
こちらのテーブルは	table-layoutにfixedを指定しています

width: 100px;	width指定なし
こちらのテーブルは	table-layoutなしです

モダンブラウザではz-indexが効いているが、
IE7、IE6では効かずに、ターゲットとなる要素の重なりがばらばらになる場合があります。

.parent .target{
	z-index: 10;
}

その際には、ターゲットの要素のみならず、親要素にもz-indexを指定してあげます。

.parent{
	z-index: 9;
}
.parent .target{
	z-index: 10;
}

それでも改善しない場合は、以下のように「position: relative」を指定してみます。

.parent{
	position: relative;
	z-index: 9;
}
.parent .target{
	z-index: 10;
}

ほとんどの場合はここまでで解決するはずですが、
改善しない場合は、対象となる他の要素にpositionやz-indexを設定してみます。
htmlやcssの構造により、症状は複雑になるようなので、こればっかりは明確な答えは出しにくいです。

IE6、IE8以上では問題なく、IE7のみで「position: absolute」がズレる場合、以下の方法で解決する場合があります。

absoluteを設定する場合に、親要素にrelativeを指定しますが、そのrelativeを指定したさらに親の要素に「height:100%;」を指定します。

.grandparent{
	height: 100%;
}
.grandparent .parent{
	position: relative;
}
.grandparent .parent .target{
	position: absolute;
}

こちらはさまざまなシチュエーションが重なった場合に、稀に発生する事象のようなので、解決策としては絶対ではありません。

posted : 2013.01.23