html - Chrome 和 Chromium 有我的 <ul> 左边的一个像素，所有其他浏览器都显示完美

Question

它可能看起来很挑剔，但我似乎无法让我的菜单在 Chrome 下完美对齐，同时在所有其他浏览器下保持正确。

如果您使用 Chrome 查看 techwalrus.com 并将鼠标放在“类别”菜单上，您会注意到其下方的 UL 位于左侧 1 个像素处。

这是问题的屏幕截图。

http://i.imgur.com/cWXO2ev.png

所有其他浏览器都以正确的方式显示它。我该怎么办？

.nav{
width:100%;
background-color: #0066B9;
font-family: verdana;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
}


.nav ul{
width:960px;
margin:0 auto;
list-style: none;
padding: 0px;
}
.nav li{
display: inline;
position: relative;
background-color: #003E64;
white-space: nowrap;
padding-top: 4px;
padding-bottom: 4px;
}
.nav ul li a{
color: white;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
}
.nav ul li a:hover{
background-color: green;
padding-left: 10px;
padding-right: 10px;
}
.nav ul li ul{
display: none;
position: absolute;
width: auto;
left: 0;
margin-top: 4px;
}
.nav ul li:hover ul{
display: block;
}
.nav ul li ul li{
display: block;
width: auto;
}

Answer 1

一个适合你的快速解决方案

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.nav ul li ul { margin-left:1px; }
}