[英]Is it possible for an inline element to validly have a block level element descendant?
將塊級元素(例如p
直接嵌套在內聯元素(例如b
是無效的。
但是,使用諸如display: inline-block
或position: absolute
css在概念上聽起來很合理,因為可以在嵌入式上下文中包含塊級內容。
瀏覽器在嵌入式元素中很大程度上接受了此類塊級元素,但是在某些情況下,無效的構造會引起實際的問題:
<p><span><p></p></span></p>
上面的示例不會被解析為三個嵌套元素; 最內層的<p>
會隱式關閉外層的<p>
,而與CSS無關。 您可以看到一個jsbin演示 。
是否有使用中間元件以有效方式在一個內聯元件的地方塊級元素的某種方式?
如果這是不可能的,是有多數情況下無效的但功能的解決方法(優選也為棘手<p>
標簽)?
明確地說,我正在尋找一種通用的解決方案,該解決方案不需要對文檔結構進行有創性的更改(即“只是在任何地方使用span
,對於所有內容”都不是有吸引力的解決方案)。 我想將一個未知的(動態生成的)文檔片段與潛在的塊級內容一起嵌入-因此修復該片段以排除塊級元素是不可行的。
相關:(主要解決直接嵌套的有效性)
W3C驗證器(在XHTML模式下)列出了在<span>
和<p>
之間有效的以下元素:
使用這些作為內聯阻止程序的頁面可以在XHTML Strict中進行驗證,但不能在HTML 5中進行驗證。在這些標簽中,我傾向於object
,因為它的語義負擔最少。
HTML 5似乎已經放棄了內聯與塊的區別,而轉向了更為復雜的系統,在該系統中,元素有幾種不同的類別,並且元素可以具有哪些子元素取決於其祖先是什么。 在這些元素中, ins
, del
和map
現在接受其父元素接受的同一種子元素,而button
僅接受“短語內容”(與內聯元素最接近的內容)。 object
的錯誤消息沒有多大意義,但就我所知,它正在繼承父元素的限制,同時也施加了自己的一些限制。
據我所知,一旦您進入內容(沒有iframe和新文檔),就無法逃脫措辭,因此,此問題的答案是“否”,無法在HTML5中完成(因為本文)。
從語義上講是錯誤的,我認為HTML5僅允許<a>標記內的塊元素(據我所知)。
換句話說,您可以通過更改CSS來使html代碼按需工作,但這並不意味着您的html代碼正確。 您還應該考慮將出現的SEO和可訪問性問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.