Question

div是一个块元素，span是一个内联元素，所以根据xhtml 1.0验证它不对，但仍然有几个网站使用这种方法进行样式化是不是很好？或者它会引起一些问题请帮助我？

Answer 1

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

Answer 2

这样做的网站不会“严格遵守xhtml”，但实际上这样的HTML在任何现代浏览器中都能正常运行。这并不意味着你应该这样做 - 因为没有必要。

Answer 3

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

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

这是错误的，并且因为不了解这样的标准而感到尴尬（你的网页设计师会嘲笑你）！

Answer 4

当你需要获得span的offsetTop（offsetLeft）时，在div中嵌套div可能会在firefox中导致严重问题。

然而，这在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>

在跨度问题中嵌套div

4 个答案: