CSS 操作を考慮すると、ブロック要素を含むインライン要素は有効な HTML と見なされますか?

難題: 埋め込みブロック要素を使用したインラインへのブロック要素の許容される変換を解決する

HTML マークアップと CSS スタイルの領域では、インライン要素内のブロック要素は、確立された Web 標準に違反します。ただし、逆のシナリオ、つまりブロック要素を含むインライン要素が発生すると、特殊な状況が発生します。

次のスニペットを考えてみましょう:

<div><p>This is a paragraph</p></div>

このマークアップは、謎の CSS が見つかるまで完全に有効であるように見えます。以下が適用されます:

div {
   display:inline;
}

結果の Web ページを調べると、難問が生じます。インライン div 要素はブロックレベルの p 要素を囲むようになり、従来の HTML および CSS ルールに反する可能性があります。

妥当性の曖昧さ

妥当性の問題が最も重要になります。ページ要素は引き続き Web 標準に準拠していますか?最初のマークアップは有効だが、CSS によって要素が無効になると主張する人もいるでしょう。一方、有効性は CSS 適用後に判断されるべきだと主張する人もいるかもしれません。

CSS 仕様エニグマ

CSS 2.1 仕様では、次の特定のシナリオに対する不可解な定義が提供されています。

「インライン ボックスの場合」インフローのブロック レベル ボックスが含まれており、インライン ボックス [...] ブロック レベル ボックスの周囲で分割され、インライン ボックスが 2 つのボックスに分割されています..."

この説明は、インライン ボックスが要素は 2 つに分割され、基本的に埋め込まれたブロック要素の周囲に匿名のブロック ボックスが作成されます。しかし、この仕様では、実装とブラウザ間の一貫性に関して未解決の疑問が残されています。

ブラウザ実装の不確実性

CSS 仕様では動作を定義しようとしていますが、さまざまな形式での実装は困難です。ブラウザはまだ推測の余地があります。一部のブラウザーは仕様に従っている場合がありますが、ブロック要素を含むインライン要素の周囲に境界線をレンダリングするなどの代替実装を示すブラウザーもあります。

HTML5 例外

複雑性の増加この状況に対し、HTML5 では、 などの特定のインライン要素内にブロックレベルの要素を配置できる例外を導入しています。タグ。この例外は、クリック可能なコンテンツの大きなブロックを作成しようとする開発者に抜け穴を提供します。

結論

ブロック要素を埋め込みブロック要素を含むインラインに変換することの合法性は依然として課題です。議論の。 CSS 仕様はフレームワークを提供しますが、その解釈と実装はブラウザーによって異なる場合があります。そのため、開発者はこの手法を使用する場合、特にブラウザ間の互換性に関する考慮事項に関して注意する必要があります。

以上がCSS 操作を考慮すると、ブロック要素を含むインライン要素は有効な HTML と見なされますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。