HTML元素插入到DOM在多个怪点

我有我的HTML，这看起来非常简单中的以下代码：HTML元素插入到DOM在多个怪点

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

但是，当我去渲染它的a元素被复制遍布页。任何想法为什么发生这种情况？

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

2013-07-31 22:33:16

我之前遇到过这个问题，在深入了解之后发现了很多事情，我认为值得分享我的发现。我能够用这个简单的代码复制问题：

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

上面的代码将不是一个，不是两个，而是a元素的三个实例渲染，没有内容，但与CSS类完好无损（。在一个接一个，并包装三和四）。

别急，它变得怪异：

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

希望你找到这个有趣/有用的。我第一次看到它时肯定会把我扔回去。

2013-07-31 22:13:54

它并不奇怪。你没有关闭你的'''标签，所以浏览器只是猜测你想完成什么。 – miah

@miah如果浏览器猜到它，那么我同意这不会是那么奇怪，但是它在不同浏览器上的表现完全相同，这意味着这实际上是html规范的一部分，可能会用作混淆的实用程序。此外，将内联样式分配给内联元素的想法可能会改变其在内联元素中的呈现方式，这在标准或其他任何地方非常奇怪。 –

@miah为了正确性，渲染引擎不会猜测，它们根据一组规则推断/解析。虽然，我同意这是一个相当孤立的问题，并可能不会对别人有用 - 因为这是一个非常独特的场景...... – xandercoded

您没有正确使用HTML标记。

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

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

（赦免的空间，它不会使没有它的HTML。）

2013-07-31 22:19:06 Tom

回答