我一直在用头撞墙，最后决定寻求帮助。当鼠标悬停并与链接鼠标悬停在 div 上时，我有两个菜单下拉菜单。第一个在所有浏览器中都很好地对齐，第二个在所有浏览器中都很好地对齐，除了 Chrome，它偏离了大约 10 像素。我已经尝试了我能想到的一切，但无法让 Chrome 浏览器像其他浏览器一样对齐它们。
您可以在http://www.brewawesome.com看到一个示例。这两个菜单是“啤酒食谱”（完全对齐）和“我的啤酒食谱”（未对齐）。
问问题
167 次
4 回答
0
Use Chrome-specific css and reduce the positioning from the left
@media screen and (-webkit-min-device-pixel-ratio:0) {
#divMyBeerRecipes{left:97px;}
}
于 2013-10-08T12:49:30.350 回答
0
对于您的第二个菜单使用
<div id="divMyBeerRecipes" class="menubody" style="height: 100px; left: 26.8%; display: none;">
于 2013-10-08T12:56:45.267 回答
0
由于 chrome 中的字体太小，您的菜单没有正确对齐。我认为这是由于font-variant:small-caps财产。这会将您的单词更改为大写，但会更改为字体小写字母的大小。
在 chrome 中，这似乎使文本变得特别小。您可以尝试使用text-transform:uppercase;which 应该将每个浏览器中的所有菜单字体更改为相同的大小。如果您随后需要将字体大小更改为更小，您只需对其应用 css 字体大小，这将为您提供一种更跨浏览器友好的方式来大写您的单词
如果您在不同的浏览器中查看此示例，您会发现与使用变体相比，使用文本转换完成的文本大小具有更好的渲染和更紧密的匹配
于 2013-10-08T14:11:53.307 回答
0
对于#header 更改字体大小：12px；字体大小：13px；
于 2013-10-08T13:19:18.387 回答