0

我的 HTML 中有以下代码，看起来很简单：

<div>
    <a" class="test">Test</span>
</div>

但是当我去渲染它时，a元素会被复制到整个页面。知道为什么会这样吗？

4

3 回答 3

2

您没有正确使用 HTML 标签。

<div>
    <a class="test">Test</a>
</div>

上面的代码应该正确呈现。您必须使用 </a> 而不是 </span> 标记来关闭您的锚标记。

（请原谅这个空间，没有它就不会呈现 HTML。）

于 2013-07-31T22:19:06.057 回答
2

现代浏览器使用 HTML5 解析算法，该算法对错误嵌套的标签有特殊规则：http: //www.w3.org/TR/html5/syntax.html#an-introduction-to-error-handling-and-strange-cases-in-解析器。我猜，内联显示的不同行为是由于内联和块格式化上下文的不同空白处理模型，导致该算法创建的隐式元素中出现不同的文本内容。

于 2013-07-31T22:33:16.433 回答
1

我早些时候遇到了这个问题，在深入研究之后发现了很多东西，我认为值得分享我的发现。我能够用这个简单的代码复制这个问题：

<div id="one">
    <div id="two">
        <a class="test">Test</span>
    </div>
</div>
<div id="three>
    <div id="four">
    </div>
</div>

上面的代码将呈现不是一个，不是两个，而是三个a元素的实例，没有内容，但完整的 css 类。（一个接一个，两个包装三个和四个）。

但是等等，它变得更奇怪了：

  • 如果您用链接替换结束span标记，</div>仍然会被复制，但现在只复制了两次，链接包装的三个和四个不再存在。
  • 如果您添加style="display:inline;"到带有结尾的版本，</div>则行为将与结尾跨度相同。一旦你意识到这a已经是一个内联元素，那就更奇怪了。
  • 结果在浏览器之间是一致的，这意味着它很可能不仅仅是一个引擎的怪癖，而是 HTML 固有的东西。（在 webkit 和 Gecko 浏览器上试过，但还没试过 Trident）。

希望你觉得这很有趣/有用。当我第一次看到它时，当然让我陷入了循环。

于 2013-07-31T22:13:54.623 回答