在 span 问题中嵌套 div答案

【问题标题】：nesting div within span problem在 span 问题中嵌套 div
【发布时间】：2010-05-27 09:27:03
【问题描述】：

div 是一个块元素，span 是一个内联元素，所以根据 xhtml 1.0 验证它是不正确的，但是仍然有几个网站使用这种方法进行样式设置，可以吗？否则会引起一些问题，请帮助我？

【问题讨论】：

你说的是哪种方法？您的问题不清楚...您能否发布一些示例代码？
这种说法是无效的，但还是有很多网站曾经这样做过
可能是因为上述 HTML 的作者不明白应该在哪里使用像和
这样的容器标签。您会惊讶于有多少人没有听说过“块元素”和“内联元素”这两个术语。

标签： html

【解决方案1】：

这是不对的 + 你永远不需要这样做 => 因此永远不应该。

【讨论】：

但仍有一些网站使用这种方法，例如我在 firebug 中看到了 google 的代码，他们也使用了嵌套在 span 中的 div
那又怎样？你仍然从不需要这样做，而且它总是是错误的。其他作者可能愿意编写糟糕的代码并冒更多错误和更多未定义行为的风险以换取……好吧，什么都没有……但这不是这样做的理由。
Google 以使用“非验证”代码而闻名。它们针对大小和速度进行优化，而不是有效标记。
如果你把一个 div 放在一个 span 里面会发生什么？我的意思是在现实世界中，而不是在“它必须验证”的世界中？
adinas：浏览器会尝试以自己（未指定/不可预测）的方式对其进行交互。它可能会很好，它可能会破裂。它现在可能工作，稍后会中断。您不应（过分）依赖未指明的行为。

【解决方案2】：

这样做的网站不会“严格符合 xhtml”，但实际上像这样的 HTML 在任何现代浏览器中都可以正常工作。但这并不意味着您应该这样做 - 因为没有必要。

【讨论】：

【解决方案3】：

从今天 2014 年 3 月 11 日开始，现代浏览器会给您带来问题，因为它们呈现块元素与内联元素的方式不同。

我自己也遇到过这个事件，看我的经验和解决方法：http://diophung.blogspot.sg/2014/03/web-developer-conform-to-w3c-standards.html

不知道这样的标准是错误的，而且很尴尬（你的网页设计师会嘲笑你）！

【讨论】：

【解决方案4】：

在需要获取 span 的 offsetTop(offsetLeft) 时，在 firefox 中嵌套 div 可能会导致 严重问题。

但是这在 chrome(v57.0.2987.98) 中执行正常。

所以我同意 Konerak 的回答：

" 浏览器会尝试以自己的方式解释它（未指定/不可预测）方式。它可能会很好，它可能会休息。它现在可能工作，稍后会中断。 "

这完全取决于浏览器本身。
关于 offsetTop/offsetLeft 的规范在这里：
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop

以下是我的测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="margin:100px">
        <span id="span-divWrapper">
            <div id="div-nestedInSpan" style="border:1px solid black;">I am the div nested in span</div>
        </span>
    </div>
    <button onclick="showDivOffsetTop()">show div offsetTop</button>
    <button onclick="showSpanOffsetTop()">show span offsetTop</button>

    <script type="text/javascript">
        var div = document.getElementById("div-nestedInSpan");
        var span = document.getElementById("span-divWrapper");
        var showDivOffsetTop = function(){
            alert(div.offsetTop);
        }
        var showSpanOffsetTop = function(){
            alert(span.offsetTop);
        }
    </script>
</body>
</html>

【讨论】：