html - 没有边框的 li 元素下的额外白线

Question

我的列表项下出现额外的白线时遇到问题。这不是边框，因为我没有设置任何边框，除了我的帐户下的边框，它只是为了表明白线不是边框。它下面的是 -- 一个 4px 的边框，与背景颜色相同。

这个问题发生在我解决了我的 Nivo Slider 和我的 WP 网站上的 Woocommerce 插件之间的冲突之后。我让他们两个一起工作，但随后又出现了列表中的另一个问题。关于造成这种情况的原因以及如何解决它的任何想法？

如果有帮助，这是我的 CSS:

#header #navigation ul.nav > li.current_page_item > a 
{ color: #D4145A;}
#header #navigation ul.nav > li:hover a {
border-width: 0px 0px 4px;
border-style: none none solid;
border-color: -moz-use-text-color -moz-use-text-color rgb(212, 20, 90);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
background: none repeat scroll 0% 0% rgb(212, 20, 90);}

还有它的 HTML:

<nav id="navigation" class="col-full parent" role="navigation">
<ul id="main-nav" class="nav fl parent">
<li class="page_item"></li>
<li class="page_item page-item-11"></li>
<li class="page_item page-item-12"></li>
<li class="page_item page-item-13 parent"></li>
<li class="page_item page-item-15 current_page_item parent">
<a href=""></a>
<ul class="children"></ul></li>
</ul>
</nav>

请帮忙!我束手无策!谢谢!

补充一下:

这是我修复 Nivo Slider 和 Woocommerce 插件之间的冲突之前的样子:

[网址= http://postimage.org/image/lx50u5qxx/] [img] http://s10.postimage.org/lx50u5qxx/noextraline.jpg[/img][/url]

http://postimage.org/image/lx50u5qxx/

如果我返回并删除对 Nivo-Woocommerce js 冲突的修复，我的导航会返回到上面链接的旧漂亮 self ，没有白线。

我在此处找到的解决 Nivo-Woocommerce 冲突的办法是:

jQuery conflict issues between jScrollPane and NivoSlider WP plugin

非常感谢到目前为止的回答。希望有人能帮助我。

添加:

刚刚注意到在上面的“之前”图像中，向下箭头没有显示，它们应该显示，只有在我执行 Nivo“修复”时才会显示。我想这也与它有关？箭头的 css 是这样的:

#header #navigation ul.nav > li.parent a::after {
font-family: 'WebSymbolsRegular';
display: inline-block;
font-size: .857em;
margin-left: .618em;
content: ";";
color: #dedede;
font-weight: normal;
}

Answer 1

如果不是边框，那很可能是边距。尝试给出 <li>

margin:0;