- 2009-07-18 (土) 12:05
- CSS | HTML・XHTML
IE7、8でリストに隙間ができる
先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
IE7、8以外だとこんな感じでも問題ないです↓
■html
<ul> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> </ul>
■CSS
ul {
list-style:none;
}
li {
margin-bottom:2px;
}
まあすごい簡単な感じにCSSも書いてありますが。サイトによってリセットCSSが入っている場合が多いので諸々の部分は省いております。
この際IE7で見ちゃうと大変なことに画像間の余白が予定より広くなることがありますので、
そのときの解決策はliに大してfont-size:1%;のようにするとなおります。
しかし、このままでは、IE8でリスト4個置きぐらいに3px程度余計に余白が付くことがありますので、さらにliとその中のaに追記します。
li {
line-height:0;
font-size:1%;
margin-bottom:2px;
}
li a {
line-height:normal;
}
これでオッケーです。
まだまだIE問題は大変そうです。
- Newer: 参考になるモバイルサイト〜html.ver〜
- Older: 巷で話題のフリーペーパー「美少女図鑑」
Comments:6
- えど 09-07-19 (日) 10:48
-
はじめまして。
ふと思ったんですが、img 要素の vertical-align の問題ではないでしょうか。
多分、vertical-align: bottom; とかを指定すると、不明な余白が消えてくれると思います。 - ts 09-07-19 (日) 11:15
-
はじめまして、コメントありがとうございます。
確かに最初はimgのvettical-alignをいじればいけるのかと思い、デフォルトでimg要素にvertical-align:bottom;が入っていたので、
topやtext-top等も指定したのに上手くいかず、display:block;もダメでした。
なのでこの方法で解決しました。
コーディングはまだまだわからないことがたくさんありますので、他いろいろと共有していただけると幸いです。
今えどさんのサイト見たんですが、たまに参考にさせていただいています！これからもよろしくお願いします。 - えど 09-07-19 (日) 18:36
-
なるほど、そうだったんですね。
IE はたまに言うことを聞いてくれないから困りますよね・・；
たまに見ていただいているとのことで、うれしい限りです！
最近はちょっと更新率落ちていますが・・こちらこそよろしくお願いします！ - ts 09-07-20 (月) 0:16
-
本当にIEのことで頭がいっぱいで、IE8でも期待を裏切らないですね。
いえいえ、こちらこそ何も知らない若造ですがよろしくお願いします。 - ガメ 09-11-13 (金) 17:32
-
はじめまして。ちょうど同じ問題でぶつかっていたので、
大変助かりました。
今まで指定していたimgのvettical-align等もなぜか意味を成さず、変な隙間に悩まされておりました。
ありがとうございました。 - ts 09-11-14 (土) 17:34
-
お役に立てたようで良かったです♪
IEにはこれからもたくさん悩まされますね。
こちらこそ有り難うございます。
Trackbacks:0
- Trackback URL for this entry
- http://design-tracks.com/study/css/ie7%e3%80%818%e3%81%a7%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ab%e9%9a%99%e9%96%93%e3%81%8c%e3%81%a7%e3%81%8d%e3%82%8b/trackback/
- Listed below are links to weblogs that reference
- IE7、8でリストに隙間ができる from 新米デザイナーの日報|design tracks
