REDLINE MAGAZINE | リストタグを使用時のIEでの変な隙間を消す

リストタグを使用時のIEでの変な隙間を消す

私的覚え書き。
リストタグを使用してメニューを作ったりする際にIEだけに変な余白が入る事がある。それを解消するネタ。

>>問題のサンプル・こんな感じ。
Firefox等で見るとちゃんとメニューの間が詰まっててＯＫなのだが、IEの場合だと勝手に余白が入る。marginやpaddingを0にしても、liタグを途中改行しても効果なしで、その都度ごまかしてきたりしてたんだけど、とりあえず原因はIEの場合、リスト内のインライン要素をブロック化すると余計な余白を入れるというかline-heightの解釈が正しくないっぽい。

>>対策はこんな感じ。

li {
	line-height:0;
	}
a {
	display: block;
	background-color:#900;
	padding: 5px;
	color: black;
	text-decoration:none;
	line-height:normal;
}

最初liタグのline-heightを0にするとaタグにもそれが継承されてしまって、くしゃくしゃっと縮まってしまうのでulに対してline-height:0;を指定してたんだけど、liタグに指定してもaタグのline-heightをnormalに指定しておくと普通の高さの解釈となるので解決。

2006年11月08日 00:42 | Red | パーマリンク