ホームページ > 記事 > ウェブフロントエンド > タグ li はブロックレベルの要素分析ですか?
ブロックレベルの要素: ブロックレベルは、誰もが知っていると思います (または Google で調べてください)。以前コードを書いていた時、
タグに直面するといつも違和感を感じていました。 なぜ高さを設定できるのですが、
要素とは異なり、「セミインライン」(inline: inline[text]-level) 要素であるように感じられます。 HTML 4 は次のように記述されます:次の要素 は、ブロックレベルの要素を含む可能性があるため、ブロックレベルの要素ともみなされる可能性があります: この説明では、< と言っているようです。 ;li />
は「セミインライン」要素です。もちろん、このリストの <td />
に類似した要素も、私にそのような疑問を引き起こしました。今回は各ブラウザのデフォルトCSSを調べてみました。結果は次のようになります:
ブラウザ | CSS |
---|---|
IE6/IE7 |
li{<a href="http://www.php.cn/%20wiki/927.html" target="_blank">display<p>:block;</p></a> } |
IE8+ / Webkit / Firefox / Opera | li{display:list-item; } |
<li />
就是一个"半内联"的元素。当然,这个列表里面的类似于 <td />
这些元素,也曾给我带来这样的疑惑。今天看了一下各浏览器的默认CSS。结果是这样的:Browsers | CSS |
---|---|
IE6/IE7 |
li{<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block; } |
IE8+ / Webkit / Firefox / Opera |
li{display:list-item; } |
在这里,也基本上明了了。在除 IE6/7 以外的 A-Grade 浏览器中,就是一个"半内联"的元素。提到 display:list-item;
,其实,即使现在所有的 A-Grade 浏览器都支持,用的人其实不多。为什么?其实就是没什么用。在 Quirks Mode,PPK 是这样说的:
display: list-item
ここで、基本的には明らかです。 IE6/7 以外の A グレード ブラウザでは、これは「セミインライン」要素です。display:list-item;
について言及すると、実際、現在すべての A グレードのブラウザがこれをサポートしているにもかかわらず、それを使用している人は多くありません。なぜ?実際、それは何の役にも立ちません。 Quirks モードでは、PPK は次のように言います:そうです。実際、これにはあまり意味がありません。しかし、それは私の疑問の一つを解決したと考えることができます。あなたもそのような疑問を持っているなら、それを共有してください。おそらく、次回コーディング中にバグやその他の質問が発生したときに、おそらくすぐに対応できるでしょう。display: list-item
は、要素がリスト項目として表示されることを意味し、主に要素の前に黒丸があることを意味します(UL のように) ただし、Mac 上の IE 5 では番号が取得されます (OL など)。番号はバグがあります。ページ内のすべての previous LI は 1 つとしてカウントされるため、この例は番号 5 から始まります。 (スクリーンショットは互換性 LI を挿入する前に作成されたものです)。実際の例:display: blockdisplay: list-itemdisplay: list-item
以上がタグ li はブロックレベルの要素分析ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。