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

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 和sub_menu 的第一个li 下

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