IE7でfloatしたリスト要素(li要素)がずれるときの対処法

2014.02.27 HTML/CSS
IE7でfloatしたリスト要素(li要素)がずれるときの対処法

リスト要素(li要素)をfloatしたときに、IE7で表示すると階段状にずれてしまうときがあります。今どきIE7に対応する必要なんてあまりないと思いますが、ごくたま~に対応するときにいつも忘れているので備忘録です。

階段状になる原因は、li要素の中のa要素にfloat指定をしてしまっていることのようです。li要素をfloatしてナビゲーションを作るときなど、a要素にdisplay:blockなどを指定することが多いので、floatもついでに指定してしまいがちです。しかしIE7での表示に対応する場合には、li要素にfloat指定をするように注意しましょう。

#nav ul {
	width: 1000px;
	margin: 0 auto;
}
#nav ul li {
	float: left;
}
#nav ul li a {
	background: url(images/nav.png) no-repeat 0 0;
	width: 200px;
	height: 50px;
	display: block;
	text-indent: -9999px;
}

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら