爲什麼在這種情況下使用自閉標籤會產生如此突出和奇怪的效果？

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/

第一行嵌入一個普通關閉標籤的跨度，而第二個使用一個自閉的標籤。第一行工作正常，而第二行有一個奇怪的結果。

我只是好奇爲什麼在每種情況下處理元素有這樣的差異。我知道在非嚴格的xhtml下，自我關閉標籤並沒有得到很好的支持。看起來自閉標籤正在被視爲一個開放的標籤。

現代瀏覽器仍然不支持自閉合html標籤嗎？我是否希望更改文檔類型或其他內容以使其起作用？

具有諷刺意味的是我竟然開始有明確的結束標記，但跑了通過瀏覽器的XML解析器和回HTML，解析器感覺就像倒塌的空元素爲自閉標籤，它迅速地打破了一切。

Answer 1

Web瀏覽器具有DOM檢查器，它向我們展示了生成的DOM樹的結構。例如，在Firebug：

正如你可以看到，Firefox不承認自閉的標籤，但把它像一個起始標籤來代替。當到達段落末尾時，Firefox將自動關閉該SPAN元素，這意味着SPAN將包含段落的剩餘文本。

現在，由於您將DIV元素插入到SPAN元素中，DIV將放置在該SPAN元素的文本內容下方。這是因爲DIV元素是塊級元素。出現在文本內容之後的塊級元素放置在該文本內容的下方。

Answer 2

當你自己將一個標籤如span放在一起時，就我所能想象的***而言，你實際上並沒有自我封閉它 - 這些標籤沒有這種能力。你實際上正在做的是把它打開。當你打開東西時，瀏覽器會自由地關閉它們，通常在父母的結束標記結束時關閉它們。

所以在你的例子中，如果nº2，你會得到一個直到p元素結束的內聯塊。現在，在這個內聯塊中，你添加了塊級元素。那麼，這一次又一次......通過在內聯塊（內嵌塊）內放置一個塊，瀏覽器接受另一個自由度，並且（基本上）將塊元素周圍的所有內容放入儘可能多的塊級元素中（這是1或2 - 不再）。

就你而言，你會在插入的div前面的文本（「看看我是否可以嵌入嵌入塊」）獲得一個「匿名」塊。

由於塊垂直堆疊，因此您在第二段的外觀就不足爲奇了。

看到有色小提琴：jsfiddle。淨/ T7ByE/1 /（不可點擊）看到它更好。

相關鏈接
display:block inside display:inline

***它kind'a seems，取決於您的內容類型跨度，其實是自我封閉的*

Answer 3

是否有一個良好的理由的現代瀏覽器仍不支持自動關閉html標籤？

向後兼容性。

我是否希望改變文檔類型或其他東西來使其工作？

你想使用XML，你需要send your document as XML（application/xhtml+xml，具體）。這主要與MIME類型有關，而不是文檔類型。當然，有no way to make it work in IE <9。