REDLINE MAGAZINE | リストタグを使用時のIEでの変な隙間を消すREDLINE MAGAZINEトップページへ

すべてのエントリを見る

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

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

>>問題のサンプル・こんな感じ。
Firefox等で見るとちゃんとメニューの間が詰まっててOKなのだが、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に指定しておくと普通の高さの解釈となるので解決。

<< FOUC | リストの隙間はIE7では大丈夫だった。 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/69

リストタグを使用時のIEでの変な隙間を消す へのトラックバック一覧

» liのなかでaをblock要素にしたら・・・ 送信元 これからゆっくり考える
す、隙間ができたんですよ。 ま、簡単に書くと <ul> <li><a href="#">...
Trackback time : 2008.10.16

» リストタグ使用時のInternetExplorerの変な隙間解決法 送信元 吉田哲也ブログ(仮)
リストタグでメニューバーなどをコーディングしたときに、 InternetExpl...
Trackback time : 2009.07.13

コメント (8)

自分も同じ現象に悩んでいました。おかげで解決しました。どうもありがとうございました。

>848440さん
こんばんわ。コメントありがとうございました。
この現象、結構はまりやすいですよね。お役に立ててよかったですー。

自分も同じ壁にぶつかりました。
諦めかけていましたが、無事解決です。
ほんとにありがとうございました^^

>tmfmさん
コメントありがとうございます。
自分も最初ぶつかったとき、なんじゃこれーーって混乱しましたw
解決してよかったです(n' ω 'n)

お陰さまで助けられました。
ありがとうございました。

それにしても綺麗なサイトですね!

いろいろ探してみて、ようやく辿り着きました。困り果てて、あきらめかけていたのですが、うまく行きました。
丁寧でわかりやすい解説本当にありがとうございます。

今までずっと、コメントタグで部分の改行を無効にしてたのですが、この方法でスマートに解決でき本当に助かりました!!!
ありがとうございます。

解決しました。どうもです。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。