Yuki's SlowLife

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





HTMLはこんなかんじ。
対策が分からなかった時は、


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

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

◆解決策１

◆解決策2

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

◆解決策4

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

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

今までずっとHTMLの改行をとって対応してましたが、それができない事態に直面してこちらの記事拝見しました。

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

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

ちなみに、IE８では
解決策1は効かず、解決策2はレイアウト崩れ、解決策3はheightが3pxほど大きくなる、という現象を確認しました。

たすかりましたー！ＩＥ嫌いになりそうですｗ

>ckさん
アドバイスありがとうございます！
>みゃぁさん
お役に立ててよかったです！
IE6…悩まされますよね。。毎日社内で誰かが愚痴をこぼしてます。。；；

zoom:1;
で助かりました！！ありがとうございます。
うまくいった後に、「zoom」ってなに？？と調べるくらいCSS初心者です。
IE6に対応するのに、こんなに苦労するとは思いませんでした・・・・((+_+))

すごくいまさらですがnoyさんのは間違っていません。
displayは表示形式の指定なのでインラインがブロックそのものになるわけではないです。
displayで要素そのものを変えるのが可能ならば
本来のインライン要素内にブロック要素をdisplay:inlineにすれば格納できることになってしまいます。

解決策4 「ulタグかliタグに　font-size:1px;」を使いました。これだと、aタグの要素が（幅が短くて）改行した場合の改行間隔を狭めても対応できました。

＞ie6,7恐怖症さん
わーーー　お役に立てて嬉しいです！！！

本当にありがとうございます。
ずっと直せずこちらへ来て
やっと直せました！！

>通りすがりさん
おおー通りすがってくださってありがとうございます。なるほどですね。勉強になります。

zoom:1;がすばらしいですね！

p.s.
>noy
それではインライン要素のなかにブロック要素を入れていることになるのでダメですよ。

>ちご
あーー！なるほどーーぉ。
そりゃシンプルでスマートだわ！！！
今度試してみる！！ありがとう★

これ、私はliタグはdisplay:inline;にしてるよ。
だいたいaタグをdisplay:block;にしてwidthやらfloatやらの設定をしているのでliはdisplay:inline;とlist-style:none;を書いておけば大体だいじょうぶなはず。（場合によりけりですが...）

コメントする

name:

email:

url:

comments:


Cookieに登録