ホームページ  >  記事  >  ウェブフロントエンド  >  タグ li はブロックレベルの要素分析_HTML/Xhtml_Web ページの作成ですか?

タグ li はブロックレベルの要素分析_HTML/Xhtml_Web ページの作成ですか?

WBOY
WBOYオリジナル
2016-05-16 16:41:191634ブラウズ

なぜ高さを設定できるのですが、

要素とは異なり、「セミインライン」(inline: inline[text]-level) 要素であるように感じられます。 HTML 4 は次のように記述されます:

次の要素 は、ブロック レベルの要素を含む可能性があるため、 ブロック レベルの要素とみなされます:

  • DD – 定義の説明
  • DT – 定義用語
  • フレームセット – フレームセット
  • LI – リスト項目
  • TBODY – テーブル本体
  • TD – テーブル データ セル
  • TFOOT – テーブルの足
  • TH – テーブルヘッダーセル
  • THEAD – テーブルヘッド
  • TR – テーブル行

この説明は、<li /> が「セミインライン」要素であることを示しているようです。もちろん、このリストの <td /> に類似した要素も、私にそのような疑問を抱かせました。今回は各ブラウザのデフォルトCSSを調べてみました。結果は次のようになります:

Browsers CSS
IE6/IE7 li{display:block;}
IE8 / Webkit / Firefox / Opera li{display:list-item;}

これで基本的には明らかです。 IE6/7 以外の A グレード ブラウザでは、これは「セミインライン」要素です。 display:list-item; に関しては、実際、現在すべての A グレードのブラウザーがサポートしているにもかかわらず、それを使用している人はそれほど多くありません。なぜ?実際、それは何の役にも立ちません。 Quirks モードでは、PPK は次のように言います:

display: list-item は、要素がリスト項目として表示されることを意味します。これは主に、要素の前に黒丸 (UL など) があることを意味します。ただし、Mac 上の IE 5 では番号が付きます (例: OL) 数値にはバグがあります。ページ内のすべての以前の LI は 1 つとしてカウントされるため、この例は番号 5 から始まります (スクリーンショットは互換性 LI を挿入する前に作成されました)。

実際の例:

表示: ブロック

表示: リスト項目
表示: リスト項目

そうです。実際、これにはあまり意味がありません。しかし、それは私の疑問の一つを解決したと考えることができます。あなたもそのような疑問を持っているなら、それを共有してください。おそらく、次回コーディング中にバグやその他の質問が発生したときに、おそらくすぐに対応できるでしょう。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。