Chrome 和 Chromium 在左侧有我的 <ul> 一个像素，所有其他浏览器都显示它完美答案

【问题标题】：Chrome & Chromium have my <ul> ONE pixel to the left and ALL other browsers show it perfectChrome 和 Chromium 在左侧有我的 <ul> 一个像素，所有其他浏览器都显示它完美
【发布时间】：2015-08-08 00:52:55
【问题描述】：

它可能看起来很挑剔，但我似乎无法让我的菜单在 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;
}

【问题讨论】：

它似乎也在一定的浏览器宽度/秒下进行。当我稍微增加宽度时，它会恢复正常，然后我再增加一些，它会向左移动 1 个像素。这很奇怪。需要注意的是，我已经尝试过使用其他浏览器，即。 safari, firefox, maxthon, IE，尽管有宽度，它们都正常显示。

标签： html css google-chrome

【解决方案1】：

适合您的快速解决方案

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

【讨论】：

感谢您的回复，但我试过了，它似乎影响了我不想要的 Safari 浏览器。我通过将下拉菜单进一步向右移动来解决问题，现在它已正确对齐。但是，如果我在左边有一个下拉菜单，问题就回来了。我下载了 Opera，它似乎也影响了那个浏览器。所以，如果有办法，Chrome 和 Opera。