Div 在 Chrome 中的位置与其他浏览器不同

Div position different in Chrome than other browsers

本文关键字：其他浏览器位置 Chrome Div 更新时间：2023-09-26

我一直在用头撞墙，最后决定寻求帮助。我有两个菜单下拉菜单，当鼠标悬停在div 上并与链接鼠标在div 上对齐时出现。第一个在所有浏览器中都对齐得很好，第二个在所有浏览器中都对齐良好，除了 Chrome 它关闭了大约 10 像素。我已经尝试了我能想到的一切，但无法让 Chrome 浏览器像其他人一样对齐它们。

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

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

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

如果您在不同的浏览器中查看此示例，您会发现在使用文本转换完成的文本大小方面，您比使用变体完成的文本大小具有更好的渲染和更紧密的匹配

对于您的第二个菜单使用

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

对于 #header 更改字体大小：12px; 到字体大小：13px;

使用特定于 Chrome 的 css 并减少从左侧的位置

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