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

Chrome＆amp; Chromium左边有我的<ul> ONE像素，所有其他浏览器都显示它完美

1 个答案: