ヨコハマハンドメイドマルシェ2013

【CSS】IE6 リストで隙間が出るバグ

IE listで隙間がでるバグIE7だと問題ないのですが、IE6で出る症状です。リストでナビゲーション作ってるときによく出くわします。←こんな感じで、リストに妙な隙間が出るやつ。margin:0px;にしてもpadding:0px;にしてもこの隙間は一行に消えません。



<ul>
<li><a href="#">ナビゲーションA</a></li>
<li><a href="#">ナビゲーションB</a></li>
<li><a href="#">ナビゲーションC</a></li>
</ul>


HTMLはこんなかんじ。
対策が分からなかった時は、
<ul><li><a href="#">ナビゲーションA</a></li><li><a href="#">ナビゲーションB</a></li><li><a href="#">ナビゲーションC</a></li></ul>


という感じで、無理やりタグの中の改行を取って治してました。まぁ、これじゃあタグが見づらいので、事情を知らない人が見たら「なにこれ、見にくいわー」と、きっと改行して見やすくなおすかと思います。時間経つと、すっかり忘れてしまって、後々タグを見て「なにこれ、見にくいわー」と自分で改行入れたりすることもあります。で。あとで、思い出したり・・・。

不便なので、ちゃんと調べてみて、かなり検索ヒットしたのですぐ解決です。色々と解決策を見つけましたが、どれが文法的にベストかは調べ中です。
IE6ではリスト内のaとかを、display:block;などでブロック化した場合、line-heightの解釈がおかしくなるようです。

◆解決策1
liタグに line-height:0;
liの中の aタグに、line-height:normal;

◆解決策2
liの中の aタグに、zoom: 1;

他、例えば上記のリストを背景画像に指定した画像ボタンの場合は、
◆解決策3
liタグに vertical-align:bottom;

◆解決策4
ulタグかliタグに font-size:1px;

場合によるのですが。
メモ程度なので、説明が雑でゴメンナサイ。
色々と対策ありそうです。

とりあえず、IEには悩まされます。
今日は、電話でも先方さんが「一人ひとりのパソコンに入ってるIEを消して回るほうが楽ですよね・・」と愚痴をこぼしていて、本当にそうだなぁと思いました。

コメント
やっと直りました。ありがとうございました。
  • D
  • 2011/11/14 5:10 PM
liタグ、floatさせてないのにIE6だけ
画像の間に隙間が空いていて四苦八苦していたところ、
こちらを見てfont-size:1pxで直せました!
どうしてこれで直るのか不思議ですが、ありがとうございました!
  • YUKI
  • 2010/08/14 10:40 PM
今までずっとHTMLの改行をとって対応してましたが、それができない事態に直面してこちらの記事拝見しました。

font-size:1px;
で直すことができました!ありがとうございます!

ちなみにliをfloat:left;で横並びにしたタブメニューで下に3pxほどの隙間が空いてしまっていた問題です。

ちなみに、IE8では
解決策1は効かず、解決策2はレイアウト崩れ、解決策3はheightが3pxほど大きくなる、という現象を確認しました。
  • 2010/06/09 4:15 PM
たすかりましたー!IE嫌いになりそうですw
  • 2010/05/26 11:37 AM
>ckさん
アドバイスありがとうございます!
>みゃぁさん
お役に立ててよかったです!
IE6…悩まされますよね。。毎日社内で誰かが愚痴をこぼしてます。。;;
  • ゆうき
  • 2009/11/06 11:44 PM
zoom:1;
で助かりました!!ありがとうございます。
うまくいった後に、「zoom」ってなに??と調べるくらいCSS初心者です。
IE6に対応するのに、こんなに苦労するとは思いませんでした・・・・((+_+))
  • みゃぁ
  • 2009/11/06 11:18 AM
すごくいまさらですがnoyさんのは間違っていません。
displayは表示形式の指定なのでインラインがブロックそのものになるわけではないです。
displayで要素そのものを変えるのが可能ならば
本来のインライン要素内にブロック要素をdisplay:inlineにすれば格納できることになってしまいます。
  • ck
  • 2009/10/20 10:46 AM
解決策4 「ulタグかliタグに font-size:1px;」を使いました。これだと、aタグの要素が(幅が短くて)改行した場合の改行間隔を狭めても対応できました。
  • kamo
  • 2009/09/02 7:11 PM
>ie6,7恐怖症さん
わーーー お役に立てて嬉しいです!!!
  • ゆうき
  • 2009/07/04 9:37 AM
本当にありがとうございます。
ずっと直せずこちらへ来て
やっと直せました!!
  • ie6,7恐怖症
  • 2009/07/03 7:55 PM
>通りすがりさん
おおー通りすがってくださってありがとうございます。なるほどですね。勉強になります。
  • ゆうき
  • 2009/06/06 1:55 AM
zoom:1;がすばらしいですね!

p.s.
>noy
それではインライン要素のなかにブロック要素を入れていることになるのでダメですよ。
  • 通りすがり
  • 2009/06/06 1:42 AM
>ちご
あーー!なるほどーーぉ。
そりゃシンプルでスマートだわ!!!
今度試してみる!!ありがとう★
  • ゆうき
  • 2009/03/16 11:15 PM
これ、私はliタグはdisplay:inline;にしてるよ。
だいたいaタグをdisplay:block;にしてwidthやらfloatやらの設定をしているのでliはdisplay:inline;とlist-style:none;を書いておけば大体だいじょうぶなはず。(場合によりけりですが...)
  • noy
  • 2009/03/16 11:47 AM
コメントする








   
この記事のトラックバックURL
トラックバック
職場からのブログ更新は基本的にしないんだけど、昨日の夕方から悶々と悩んでいた件が...
  • apples*log
  • 2009/04/07 12:40 PM

Profile

Yuki Noda
1982年横浜で生まれる。多摩美術大学卒。
プロフィールポートフォリオ
mixitwitterFacebook

calendar

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728293031
<< December 2016 >>

selected entries

categories

archives

recent comment

  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORUさん (12/08)
  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORU (09/20)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    ゆうき (09/04)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    rr (08/31)
  • スーパーカップのチョコミントアイスについて
    ゆうき (06/13)
  • スーパーカップのチョコミントアイスについて
    aaammm (06/13)
  • スーパーカップのチョコミントアイスについて
    ゆあ (04/11)
  • 【CSS】IE6 リストで隙間が出るバグ
    D (11/14)
  • 夢のような結婚式を終えて・・
    ゆうき (10/04)
  • 夢のような結婚式を終えて・・
    ちゃっきー (10/03)

recent trackback

links

profile

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM