忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[115] [114] [113] [112] [111] [110] [109] [108] [107] [106] [105

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

リンク付き画像をリストに入れたときにできる変なマージンの回避法

画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。
長年(過去2回ですが)苦しんできたこの現象の原因と回避法が分かりました。のでメモ。

HTMLバージョン
XHTMLTransitional、XML宣言あり。
タグの状況
liタグの中にaタグを入れその中にimgタグを入れている。
CSSの状況
ul、li、img共にマージンはゼロ。list-styleはnoneに。

表示:
marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。


1.プレーンな状態。

CSSに何も指定していない状態。
ちなみにOperaはこの状態でもマージンがないです。


2.CSSで、ul、li、a、imgタグのmarginを0に。

margin: 0;の指定があるにもかかわらず、変な余白が。


3.imgにdisplay: block;を指定。

モダンブラウザでimg関連の余白の解決法としてよく挙げられるのは、
imgに対してdisplay: block;を指定して画像をブロック要素にする方法。

確かに、Firefox、Safariでは余白がなくなりましたが、
IEでは逆に余白が余計広がってしまいます。


4.liに画像の高さと同じheightを指定。

どうもIEでは、liタグの中にブロック要素があると余白ができるようです。
ので、imgに対するdisplay: block;を消し、
liに画像と同じ高さのheightを指定してみる。

Firefox、Safari、IE7、8で余白を消すことに成功しました。
が、最終関門IE5、6がしぶとく余白をあけています。
シェアが低くなっているとはいえ、まだ彼らを無視することはできない…。

というより、無視したくないので。


5.liにheightを指定したまま、overflow: hidden;を指定する。

これで完成!


ということで、ようやく完成しました。
ルールとしては、

liタグの中に入れるものはブロック要素にしないこと。
liタグには画像と同様の高さを指定し、overflow: hidden;すること。

以上を守ると、ほとんどのブラウザできちんと表示できます。


この問題を解くのに本日2時間費やしました。

以上、メモ終わり。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
03« 2017/04 »05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
ブログ内検索
忍者ブログ [PR]