リストタグを使用時の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に指定しておくと普通の高さの解釈となるので解決。
<< FOUC | リストの隙間はＩＥ７では大丈夫だった。 >>
トラックバック
このエントリーのトラックバック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
コメント (6)
自分も同じ現象に悩んでいました。おかげで解決しました。どうもありがとうございました。
投稿者: 848440 | 2007年12月07日 11:19
>848440さん
こんばんわ。コメントありがとうございました。
この現象、結構はまりやすいですよね。お役に立ててよかったですー。
投稿者: Red | 2007年12月07日 21:57
自分も同じ壁にぶつかりました。
諦めかけていましたが、無事解決です。
ほんとにありがとうございました＾＾
投稿者: tmfm | 2008年06月12日 21:31
>tmfmさん
コメントありがとうございます。
自分も最初ぶつかったとき、なんじゃこれーーって混乱しましたｗ
解決してよかったです(n' ω 'n)
投稿者: Red | 2008年06月13日 08:48
お陰さまで助けられました。
ありがとうございました。
それにしても綺麗なサイトですね！
投稿者: tani | 2009年10月30日 17:36
いろいろ探してみて、ようやく辿り着きました。困り果てて、あきらめかけていたのですが、うまく行きました。
丁寧でわかりやすい解説本当にありがとうございます。
投稿者: akidas | 2010年01月15日 14:02