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>

回答の条件
  • 1人3回まで
  • 登録:2008/11/27 19:14:20
  • 終了:2008/12/04 19:15:03

回答(4件)

id:goodvn No.1

goodvn回答回数228ベストアンサー獲得回数182008/11/27 19:45:17

ポイント23pt

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

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

でどうでしょうか?

id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812008/11/27 20:15:57

ポイント23pt

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>
id:ardarim No.3

ardarim回答回数892ベストアンサー獲得回数1422008/11/27 23:51:50

ポイント22pt

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

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


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

id:freebreeze No.4

freebreeze回答回数931ベストアンサー獲得回数142008/11/28 00:54:18

ポイント22pt

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


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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません