html - css 兼容性，在 chrome 中多了一个列表项

Question

我有 html

<div id="leftDiv">
<ul>
    <li class="submenu_items" style="display: list-item;">
        <ul class="nomargin"> 
            <li><a href="/link1.php">One</a></li>
            <li><a href="/link2.php">Two</a></li>
        </ul>
    </li>                
</ul>
</div>

CSS是

#leftDiv ul li.submenu_items ul.nomargin{
    margin:0;             
    list-style-image:none!important;
}

我有

#leftDiv ul li{
   list-style-image: url("/images/spacer.png");
}

在 ff 中，一切看起来都很好，但在 chrome 和 opera 中，我有来自 ul li bg(/images/spacer.png) 的额外图像，看起来我在 chrome 和 opera 中有一个额外的列表项

Answer 1

看到这个小提琴

你实际上有 3<li>个节点，你的 CSS 没有正确适应你想要的输出。

您可能希望将 CSS 更改为：

#leftDiv ul{
   list-style:none;
}
#leftDiv ul li.submenu_items ul.nomargin{
   margin:0; list-style:none!important; 
} 
#leftDiv ul ul li{ 
   list-style-image: url(/images/spacer.png); 
}