Chrome在不同浏览器中的位置不同

我一直在撞墙，最后决定寻求帮助。我有两个菜单下拉菜单，当鼠标悬停在div上并与链接鼠标对齐时出现。第一个在所有浏览器中排名很好，第二个在所有浏览器中排名都很好，除了Chrome浏览器，它的大小约为10 px。我尝试了所有我能想到的东西，但无法让Chrome浏览器像其他人一样对齐它们。Chrome在不同浏览器中的位置不同

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

来源

2013-10-08 user2858594

您的菜单未对齐，因为您的字体大小不合在Chrome和其他浏览器之间看起来并不一样 – Pete

不知道会怎么样。我没有做任何特定的基于浏览器类型的字体大小... – user2858594

看到我的答案，我试图解释它 – Pete

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

在铬中，这似乎使文本特别小。您可以尝试使用text-transform:uppercase;，它应该将所有菜单字体在每个浏览器中更改为相同大小。如果您随后需要更改字体大小，则可以将css font-size应用于该字体，并且这应该会给您一个更加跨浏览器友好的方式来大写您的文字

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

来源

2013-10-08 14:11:53 Pete

皮特，非常感谢！那就是诀窍。感谢您提供根本问题的解决方案，而不仅仅是一个破解！如果我能给你两分，我会。 – user2858594

使用Chrome浏览器专用的CSS和从左侧

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

来源

2013-10-08 12:49:30 Dale

降低定位你的第二个菜单使用

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

来源

2013-10-08 12:56:45 vishalkin

有关的#header改变字体大小：12像素;以font-size：13px;

来源

2013-10-08 13:19:18

Chrome在不同浏览器中的位置不同

回答

相关问题