chrome/safari问题:<p>包含2个隐藏的<span>,每个<span>包含一个<div>,但显示的是第1个

per*_*lis 0 html safari google-chrome

以下代码片段在FF/IE中运行正常(没有显示任何内容),但在chrome/safari中,显示第1个跨度!

<p>
    <span style = "display:none"><div>inner</div></span>
    <span style = "display:none"><div>inner</div></span>
</p>
Run Code Online (Sandbox Code Playgroud)

谁有解释?

T.J*_*der 6

(它可以包含的内容)的内容模型span措辞内容.div元素是不是措辞的内容,它是流动的内容.你不能有效地拥有一个div内部span,所以当浏览器看到它将是特定于实现时,它会做什么.

对于这样的事情,W3C验证器服务很方便.例如,这是一个要求验证器服务验证此页面的示例:

<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<p><span><div>foo</div></span></p>
</body>
Run Code Online (Sandbox Code Playgroud)

...验证者非常正确地抱怨各种事情.