このような状況で自己閉鎖タグを使用すると、顕著で奇妙な効果が得られるのはなぜですか？

Question

可能性の重複：
Can a span be closed using <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番目の行は奇妙な結果を示します。

それぞれの場合、要素の処理にこのような違いがあるのはなぜか不思議です。私は、非厳密なxhtmlの下では、自己閉じタグはあまりうまくサポートされていないことを認識しています。自己閉鎖タグはオープンタグとして扱われているようです。

は、現代のブラウザはまだ自動閉鎖HTMLタグをサポートしていない正当な理由がありますか？ Doctypeなどを変更してこれを動作させることを期待していますか？

私は実際には明示的に閉じたタグで開始していますが、ブラウザのxmlパーサーとhtmlに戻して、空の要素を自己閉じタグに畳んですぐにすべてを破ったように感じました。

Answer 1

ウェブブラウザにはDOMツリーの構造を示すDOMインスペクタがあります。たとえば、Firebugのでは：あなたが見ることができるように

、Firefoxは自己終了タグを認識しませんが、代わりに、開始タグと同じように扱います。 Firefoxはパラグラフの終わりに達するとSPAN要素を自動的に閉じます。つまり、SPANに段落の残りのテキストが含まれます。あなたはSPAN要素にDIV要素を挿入しているので、

さて、DIVは、SPAN要素のテキスト・コンテンツの下にレイアウトされます。これは、DIV要素がブロックレベルの要素であるためです。テキストコンテンツの後に表示されるブロックレベルの要素は、そのテキストコンテンツの下に配置されます。あなたは自己***限り、私は想像することができるよう、スパンのようなタグを囲むとき

Answer 2

、あなたが実際に自分がそれを囲んでいない - これらのタグは、その能力を持っていません。あなたが実際にやっていることは、それを開いたままにすることです。そして、あなたが何かを開いたままにしておくと、ブラウザは自由をとり、親の閉じタグの終わりにそれらを閉じます。

あなたの例では、nº2の場合、p要素の終わりまでずっと進むインラインブロックが得られます。今、インラインブロックの中にブロックレベルの要素を追加しています。まあ、今度は...インライン（インラインブロック）の中にブロックを置くことによって、ブラウザはその自由のもう一つを取り、（基本的に）ブロック要素を囲むすべてのコンテンツを必要な数のブロックレベルの要素に入れますto（それは1つか2つです - それ以上はありません）。あなたのケースでは

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

ブロックが縦に積み重なるので、2番目の段落に表示される外観は驚くことではありません。

次の場所にある色付きのフィドルをご覧ください。net/T7ByE/1 /（クリックできない）を見てください。あなたのコンテンツタイプのスパンに応じて、実際に自己を囲むことができ

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

は***それkind'a seems *

Answer 3

まだ最近のブラウザに良い理由があります自己クローズHTMLタグをサポートしていませんか？

下位互換性。

私はdoctypeなどを変更してこれを動作させる予定ですか？

XMLを使用する場合は、send your document as XML（具体的にはapplication/xhtml+xml）が必要です。これは主に、doctypeではなくMIMEタイプと関係しています。もちろん、no way to make it work in IE <9があります。