首页 文章

内联元素是否有可能有效地具有块级元素后代?

提问于
浏览
2

将块级元素(如 p )直接嵌套在内联元素(如 b )中无效 .

但是,使用诸如 display: inline-blockposition: absolute 之类的css在概念上可以在内联上下文中具有块级内容 .

浏览器在内联元素中很大程度上接受这样的块级元素,但在某些情况下,无效的构造会导致实际问题:

<p><span><p></p></span></p>

上面的例子不会被解析为三个嵌套元素;无论CSS如何,最里面的 <p> 将隐式关闭外部 <p> . 你可以看到a jsbin demo .

Is there some way of using intermediate elements to validly place block level elements in an inline element?

If that's not possible, is there an invalid but functional workaround for the majority of cases (preferably also for the tricky <p> tag)?

需要明确的是,我需要对文档结构进行侵入式更改(即“只使用 span 无处不在,对于一切”并不是一个有吸引力的解决方案) . 我想嵌入一个具有潜在块级内容的未知(动态生成)文档片段 - 因此修复片段以排除块级元素是不可行的 .


相关:(主要解决直接嵌套的有效性)

2 回答

  • 0

    W3C验证器(在XHTML模式下)列出以下元素在 <span><p> 之间有效:

    • 对象

    • ins

    • del

    • Map

    • 按钮

    使用这些作为内联到块的扳手的页面在XHTML Strict中验证,但在HTML 5中不验证 . 在这些标签中,我倾向于 object ,因为它具有最少的语义包袱 .

    HTML 5似乎已经放弃了内联与块的区别,转而支持更复杂的系统,其中有几个不同类别的元素,元素可以拥有的子元素取决于它的祖先是什么 . 在这些元素中, insdelmap 现在接受其父元素接受的相同类型的子元素,并且 button 仅接受"phrasing content"(与内联元素最接近的元素) . object 的错误消息不会继承父元素的限制,同时也会对其自身施加一些限制 .

    就像我所知道的那样,一旦你进入内容就没有办法摆脱措词内容(缺少iframe和新文档),所以这个问题的答案是否定的,不能用HTML5完成(如这篇文章) .

  • 1

    语义错误,我认为HTML5只允许<a>标签内的块元素(据我所知) .

    换句话说,您可以通过更改css使您的html代码正常工作,但这并不意味着您的HTML代码是正确的 . 您还应该考虑将出现的SEO和可访问性问题 .

相关问题