縦並びのナビゲーション(リスト形式)を作成する場合(下記ソースコード参照)、liにdisplay: blockを入れる場合と入れない場合はどう違うのでしょうか?Win版のIE6では違いはないように見えます。a要素にdisplay: blockを入れる必要性はわかるのですが・・・。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>縦並びのナビゲーション</title>
<style type="text/css">

ul{
list-style:none;
}
li{
display: block;
width: 6em;
background :#99d47f;
}
a{
text-decoration: none;
}
</style>
</head>

<body>
<ul>
<li><a href="#">リンク項目1</a></li>
<li><a href="#">リンク項目2</a></li>
<li><a href="#">リンク項目3</a></li>
</ul>
</body>
</html>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/08/25 16:29:09
  • 終了:2007/09/01 16:30:04

回答(3件)

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/08/25 17:21:55

ポイント27pt

li は中に p や div などを入れられますから扱い的にはブロックな訳ですが……

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="text/javascript">
      onload = function() {
        if (document.getElementById('listitem').currentStyle) {
          alert(document.getElementById('listitem').currentStyle.display) ; // IE
        }
        else {
          li = document.getElementById('listitem') ;
          alert(document.defaultView.getComputedStyle(li, '').getPropertyValue('display')) ;
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li id="listitem">hoge</li>
    </ul>
  </body>
</html>

 この HTML をJavaScriptが有効なブラウザで表示させると IE6 では 'block'、Firefox や Opera では 'list-item' と出ます (ユーザースタイルシートで変更していればこの限りではないかもしれませんが)。

 つまり、IE6 では標準的に block なわけです。

 しかし、Firefox や Opera では display に block を指定すると、list-item では無くなります。具体的に言うとリストの先頭に付く黒丸などのマークがなくなります。まあ list-style-type に none を指定するのと同じような感じですが。

display CSS辞典

id:tengen

つまりIE6 ではデフォルトがblockなので必要はないがFirefoxやOperaでは デフォルトがlist-itemなので必要という事でしょうか?

2007/08/25 18:09:16
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522007/08/25 17:33:42

ポイント27pt
display: block;

を入れない場合、li要素は display: list-item としてレンダリングされます。

この場合、list-style: noneとしているので見えませんが、レンダリング時に(リスト)マーカーボックスが生成されます。

ブラウザによってはリストマーカー分の余白が空いたりします。

http://www.kanzaki.com/book/css/3-1-6.html#s3-1-6-5

id:tengen

すみません。よく意味がわかりません。

2007/08/25 18:09:44
id:wizemperor No.3

wizemperor回答回数379ベストアンサー獲得回数522007/08/25 18:19:24

ポイント26pt

上記の説明でわからない場合は、必要か不要かで言えば、入れておいたほうがいいです。

FirefoxやOperaでもlist-style: none;としている場合は、一見違いはないと思いますが、

文字サイズを拡大(Firefoxなら「ctrl」キー+「+」キー)していくとマーカーボックス(・や数字などが表示される部分)があるせいで表示が多少変わってくる場合があるのがわかると思います。

http://q.hatena.ne.jp/

id:tengen

list-style: none;としてもFirefoxでは文字サイズを拡大するとマーカーが見えるのですか!

つまりli要素にdisplay:block を設定するのは

Firefoxでのマーカーを完全に消すためということでしょうか?

2007/08/25 18:37:27

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

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

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

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

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