Question

我一直在靠墙撞击，最后决定寻求帮助。我有两个菜单下拉列表，当鼠标悬停在div上并与链接鼠标对齐时出现。第一个在所有浏览器中排列很好，第二个在所有浏览器中都很好地排除了除了Chrome之外大约10 px。我已经尝试了所有我能想到的但却无法让Chrome浏览器与其他浏览器对齐。

您可以在http://www.brewawesome.com查看示例。两个菜单是“啤酒食谱”（完全对齐）和“我的啤酒食谱”（未对齐）。

Answer 1

使用特定于Chrome的CSS并从左侧缩小定位

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 #divMyBeerRecipes{left:97px;} 
}

Answer 2

使用第二个菜单

<div id="divMyBeerRecipes" class="menubody" style="height: 100px; left: 26.8%; display: none;">

Answer 3

对于#header更改font-size：12px;到font-size：13px;

Answer 4

由于Chrome中的字体太小，因此菜单未正确对齐。我认为这是由于font-variant:small-caps属性。这会将您的单词更改为大写，但会以字体小写字母的大小更改。

在chrome中，这似乎使文本变得更小。您可以尝试使用text-transform:uppercase;，它应该在每个浏览器中将所有菜单字体更改为相同的大小。如果您需要将字体大小更改为更小，您可以将css字体大小应用于它，这应该为您提供更加跨浏览器友好的方式来大写您的文字

如果您在不同的浏览器中查看this example，您会发现在使用文本转换完成的文本大小方面，您可以获得更好的渲染效果，并且与使用变体