html / bootstrap：chrome padding不应该的地方

Question

我在最近几天尝试修复此问题失败：

我第一次打开页面时，它在下拉菜单上有一些奇怪的填充，只发生在chrome上（在FFx和IE上正常工作）

第一次加载页面后，它加载正常

正如您在屏幕截图中看到的那样，我已经把

.myCustomNav ul
{
  padding: 0px !important;
}

下拉菜单的调用如下：

<div>
      <ul class="myCustomNav nav">
        <li>
          <a .../>
        </li>
      </ul>
</div>

知道什么是错的？

你可以在http://istore.titus.biz/lovelovelove/#

上自己测试一下

Answer 1

您想减少下拉列表中的填充吗？然后减少css中以下类的填充。

 .horizontal-category a:link,.horizontal-category a:visited{  
  color:#96979D;
  padding:4px 6px;
  display:inline-block;
  font-weight:bold;
  border-right:1px solid #ec008c;
 /*background:#09C;*/     
}

Answer 2

无效的解决方案 - 以下评论

您需要为li - .dropdown-menu制作display: block。这需要放在导航CSS的底部。

CSS

.dropdown-menu li {
    display: block;
}

如果你想测试这个，请执行以下操作：

.dropdown-menu li {
    display: block !important;
}

应该修复它，但不要使用!important作为解决方案。只需确保第一个代码段低于另一个下拉列表CSS。

Answer 3

改变

.myCustomNav li{ display:inline;}

到

.myCustomNav li{ display:inline-block;}

并且它有效，只需要一些额外的调整来定位它