html - この状況で、自動終了タグを使用すると、なぜこのような目立った奇妙な効果があるのでしょうか。

Question

重複の可能性：
<span />を使用してスパンを閉じることはできますか？

<p>This is a test <span id='span1' style='display:inline-block;'></span> to see if I can embed an inline block.</p>

<p>This is a test <span id='span2' style='display:inline-block;'/> to see if I can embed an inline block.</p>​

http://jsfiddle.net/T7ByE/

最初の行には通常の終了タグが付いたスパンが埋め込まれ、2番目の行には自動終了タグが使用されます。最初の行は正しく機能しますが、2番目の行は奇妙な結果になります。

それぞれの場合に要素の処理にこのような違いがあるのはなぜか、私はただ興味があります。非厳密なxhtmlでは、自動終了タグが十分にサポートされていないことを認識しています。自己終了タグは単なるオープンタグとして扱われているようです。

最近のブラウザがまだ自動終了のhtmlタグをサポートしていない正当な理由はありますか？これを機能させるために、Doctypeなどを変更する必要がありますか？

皮肉なことに、私は実際には明示的な終了タグから始めましたが、それをブラウザーのxmlパーサーを介して実行し、htmlに戻しました。パーサーは、空の要素を自己終了タグに折りたたむように感じました。

Answer 1

最新のブラウザーがまだ自己終了 HTML タグをサポートしていない正当な理由はありますか?

下位互換性。

これを機能させるために、Doctypeまたは何かを変更する必要がありますか?

XML を使用したい場合は、ドキュメントを XML (application/xhtml+xml具体的には ) として送信する必要があります。これは、doctype ではなく、主に MIME タイプに関係しています。もちろん、IE <9 で動作させる方法はありません。

Answer 2

Webブラウザーには、結果のDOMツリーの構造を表示するDOMインスペクターがあります。たとえば、Firebugでは：

ご覧のとおり、Firefoxは自己終了タグを認識しませんが、代わりに開始タグのように扱います。Firefoxは、段落の終わりに達すると、そのSPAN要素を自動的に閉じます。つまり、SPANには段落の残りのテキストが含まれます。

ここで、DIV要素をSPAN要素に挿入しているので、DIVはそのSPAN要素のテキストコンテンツの下に配置されます。これは、DIV要素がブロックレベルの要素であるためです。テキストコンテンツの後に表示されるブロックレベルの要素は、そのテキストコンテンツの下に配置されます。

Answer 3

span のようなタグを自己で囲む場合、私が想像できる限り***、実際にはそれを自己で囲むわけではありません。これらのタグにはその機能がありません。あなたが実際にしているのは、それを開いたままにしておくことです。そして、何かを開いたままにしておくと、ブラウザは自由を取り、通常は親の終了タグの最後でそれらを閉じます。

したがって、あなたの例では、nº2 の場合、p 要素の最後までずっとインライン ブロックを取得します。さて、そのインライン ブロック内に、ブロック レベルの要素を追加します。さて、何度も何度も... インライン (インライン ブロック) 内にブロックを配置することで、ブラウザーは別の自由を利用し、(基本的に) ブロック要素を囲むすべてのコンテンツを、必要な数のブロック レベル要素に配置します。に (それは 1 つまたは 2 つです。これ以上はありません)。

あなたの場合、挿入されたdivの前のテキストの周りに1つの「匿名」ブロックが表示されます（「インラインブロックを埋め込むことができるかどうかを確認するため」）。

ブロックは垂直に積み重なっているので、2 番目の段落で得られる外観は驚くことではありません。

jsfiddle.net/T7ByE/1/ (クリック不可) で色付きのフィドルを参照してください。

関連リンク
display:block inside display:inline

***コンテンツタイプによっては、スパンが実際に自己囲みになるようです*