人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLとCSSについて。

<li>要素に囲まれた<a>を、「display:block」でブロック要素にすると、
IE6とIE7では<li>間がやたらに開いてしまいます。
FireFoxで表示したときのように、<li>間がFireFoxと同じ開き具合にするにはどうしたら良いでしょうか?

コード例を下記します。

<コード?>
<html>
<head>
</head>
<body>
<ul>
<li><a href="./A.html" style="display:block;">AAAAAAAAAAA</a></li>
<li><a href="./B.html" style="display:block;">BBBBBBBBBBB</a></li>
<li><a href="./C.html" style="display:block;">CCCCCCCCCCC</a></li>
</ul>
</body>
</html>


<コード?>(paddingやmarginを0にしてもだめでした。)
<html>
<head>
</head>
<body>
<ul>
<li><a href="./A.html" style="display:block;margin:0;padding:0;">AAAAAAAAAAA</a></li>
<li><a href="./B.html" style="display:block;margin:0;padding:0;">BBBBBBBBBBB</a></li>
<li><a href="./C.html" style="display:block;margin:0;padding:0;">CCCCCCCCCCC</a></li>
</ul>
</body>
</html>

●質問者: tetlis
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS firefox HTML IE margin
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● goodvn
●23ポイント

確かこれは IE のバグだったと思います

<li style="border: 1px transparent solid;"><a href="./A.html" style="display:block;margin:0;padding:0;">AAAAAAAAAAA</a></li>

でどうでしょうか?


2 ● GoldenDawn
●23ポイント

width を auto 以外で指定してやる。

<ul>
 <li><a href="./A.html" style="display:block;width:100%;">AAAAAAAAAAA</a></li>
 <li><a href="./B.html" style="display:block;width:100%;">BBBBBBBBBBB</a></li>
 <li><a href="./C.html" style="display:block;width:100%;">CCCCCCCCCCC</a></li>
</ul>

3 ● ardarim
●22ポイント

こちらが参考になるかと思います。

Firefox IE の表示の違いをまとめてみる-Dig*Dag


DTDをちゃんと書くということになると思います。(詳しくはリンク先に書いてあります)


4 ● freebreeze
●22ポイント

IEではli タグに display 属性で block を指定すると、隙間が出来てしまうバグがあります。


display:block を使うなら width を指定することで回避可能です。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ