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

縦並びのナビゲーション(リスト形式)を作成する場合(下記ソースコード参照)、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>

●質問者: tengen
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:background DTD HTML IE6 T-STYLE
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● GEN111
●27ポイント

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辞典

◎質問者からの返答

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


2 ● wizemperor
●27ポイント
display: block;

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

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

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

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

◎質問者からの返答

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


3 ● wizemperor
●26ポイント

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

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

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

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

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



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