在 HTML 标记和 CSS 样式领域,人们普遍认为嵌套内联元素中的块元素违反了既定的 Web 标准。然而,当遇到相反的情况时,就会出现一种特殊的情况:内联元素包含块元素。
考虑以下代码片段:
<div><p>This is a paragraph</p></div>
此标记看起来完全有效,直到神秘的 CSS应用以下内容:
div { display:inline; }
当我们检查生成的网页时,就会出现难题。内联 div 元素现在包含一个块级 p 元素,可能违反传统的 HTML 和 CSS 规则。
有效性歧义
有效性问题变得至关重要。页面元素仍然符合网络标准吗?有些人可能会认为初始标记是有效的,但 CSS 使元素无效,而其他人可能会断言应在 CSS 应用程序后判断有效性。
CSS 规范 Enigma
CSS 2.1 规范为这种特定场景提供了一个神秘的定义:
“当内联框包含流入时块级框,内联框[...]在块级框周围被打破,将内联框分成两个框...”
这个解释意味着内联元素被分成两个,本质上是在嵌入的块元素周围创建一个匿名块框。然而,该规范留下了有关实现和跨浏览器一致性的未解答的问题。
浏览器实现的不确定性
虽然 CSS 规范试图定义行为,但其以各种方式实现浏览器仍然是一个猜测的问题。某些浏览器可能遵循该规范,而其他浏览器可能会展示替代实现,例如在包含块元素的内联元素周围渲染边框。
HTML5 异常
增加复杂性针对这种情况,HTML5 引入了一个例外,允许将块级元素放置在某些内联元素中,例如 。标签。此异常为寻求创建大块可点击内容的开发人员提供了一个漏洞。
结论
将块元素转换为内嵌块元素的合法性仍然是一个主题辩论。虽然 CSS 规范提供了一个框架,但其跨浏览器的解释和实现可能会有所不同。因此,开发人员在使用此技术时应谨慎行事,特别是在跨浏览器兼容性方面的考虑。
以上是考虑到 CSS 操作,包含块元素的内联元素是否可以被视为有效的 HTML?的详细内容。更多信息请关注PHP中文网其他相关文章!