Question

正如您在下面链接的屏幕截图中看到的，我在使用Chrome 39.0.2171.95时遇到了奇怪的行为。样式列表项之间出现小于1px的间隙。它在Firefox和IE中看起来很好。

在我开始使用带有视网膜显示器的设备之前，我没有注意到它，所以我很想知道有多少人和我一样。

它不使用内联块，并且不能删除每个<li>之间的空格，因为WordPress生成了三层菜单（我怀疑它是一个解决方案）。使用负边距隐藏了差距，但作为一种解决方法而不是解决方案会导致其他问题（它会使子菜单移动到位）。

屏幕截图： http://i58.tinypic.com/m9rkmf.jpg

这是当前的CSS：

#mainmenu {
background:#333333;
position:absolute;
bottom:0;
width:960px;
}
#mainmenu.fixed {
position:fixed;
top:0;
z-index:100;
height:43px;
}
#mainmenu > ul {
padding-left:124px;
}
#mainmenu ul {
height:43px;
list-style:none;
position:relative;
}
#mainmenu ul li {
float:left;
}
#mainmenu ul li a {
display:block;
padding:12px 10px;
border-bottom:4px solid #00A33E;
color:#fefefe;
text-transform:uppercase;
text-decoration:none;
font-size:14px;
font-weight:300;
height:15px;
}
#mainmenu ul li:hover > a {
background:#222222;
}
#mainmenu .menu-item-1128 > a {
border-bottom: 4px solid #82c4e5;
}
#mainmenu .menu-item-644 > a {
border-bottom: 4px solid #e33417;
}
#mainmenu .menu-item-62 > a {
border-bottom: 4px solid #78bf32;
}
#mainmenu .menu-item-91 > a {
border-bottom: 4px solid #00A33E;
}
#mainmenu .menu-item-81 > a {
border-bottom: 4px solid #d99f3c;
}
#mainmenu .menu-item-739 > a {
border-bottom: 4px solid #F1654F;
}
#mainmenu ul ul {
display:none;
position:absolute;
top:39px;
z-index:9999;
min-width:200px;
}
#mainmenu ul li:hover > ul {
display:block;
}
#mainmenu ul ul li {
float:none;
position:relative;
}
#mainmenu ul ul li a {
padding:12px 10px;
border:0;
color:#fefefe;
text-transform:none;
text-decoration:none;
font-size:14px;
font-weight:400;
height:15px;
white-space:nowrap;
background-color:#222;
}
#mainmenu ul ul li a:hover {
background-color:#111;
}
#mainmenu ul ul ul {
position:absolute;
left:100%;
top:0;
}
#mainmenu ul ul li:hover > a {
background:#111;
}
#mainmenu ul ul ul li a {
background-color:#111;
}
#mainmenu ul ul ul li a:hover {
background-color:#000;
}

Answer 1

如下所示重新设置UL和LI，使列出的填充和边距为零。

ol, ul, li {
  margin: 0;
  padding: 0;
}

注意：将上述内容添加到CSS文件的最顶层。这样，除非另有设置，否则填充和边距将为零。

Answer 2

您的浏览器缩放为100％吗？我最近有一个类似的案例，我发现这个小差距是因为页面略微放大了。

CSS＆lt; 1px Chrome中的样式列表菜单之间存在差距

2 个答案: