在开发者工具中看到额外的元素

Question

代码：

<li> 
    <a href="#" id="CustomDecor">
        <ul id="sub_menu">
            <li><a href="#" id="Carpets"></a></li>
            <li><a href="#" id="Storage_Solutions"></a></li>
            <li><a href="#" id="Flooring"></a></li>
            <li><a href="#" id="Interior_Painting"></a></li>
            <li><a href="#" id="Kitchen_Cabinet_Refacing"></a></li>
            <li><a href="#" id="Shutters"></a></li>
            <li><a href="#" id="Window_Treatments"></a></li>
            <li><a href="#" id="Window_Blinds"></a></li>
        </ul>
    </a>
</li>

开发者工具：

为什么我会看到额外的元素？ （sub_menu下的li和sub_menu的第一{{1}}

Answer 1

您无法嵌套锚点（<a>）元素 遇到新的锚标记时，浏览器会尝试通过关闭上一个标记来修复结构。

看看这个简化的小提琴：http://jsfiddle.net/jZr3Z/

<li> 
    <a href="#" id="CustomDecor">                  <----- Anchor 1
        <ul id="sub_menu">
            <li><a href="#" id="Carpets"></a></li> <----- Anchor 2