没有边框的li项目下的额外白线

时间:2012-12-19 16:57:46

标签: html css wordpress

我在列表项下显示额外的白线问题。它不是边框,因为我没有设置任何边框,除了我的帐户下的边框,它只是为了显示白线不是边框。它下面的一个是 - 一个4px的边框和背景颜色相同。

在解决了我的WP网站上的Nivo Slider和Woocommerce插件之间的冲突后,出现了此问题。我让他们两个一起工作,但随后这个列表的另一个问题出现了。关于是什么导致这个以及如何解决它的任何想法?

enter image description here

如果有帮助,这是我的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插件之间的冲突之前,这就是它的样子:

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

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

如果我回去删除Nivo-Woocommerce js冲突的修复程序,我的导航会回到上面链接的旧漂亮的自我,没有白线。

我对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;
}

2 个答案:

答案 0 :(得分:1)

如果它不是边界,则可能是边际。尝试提供<li>

margin:0;

答案 1 :(得分:0)

尝试设置

border : 0;
outline : 0;
padding : 0;
margin : 0;

应该这样做......