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在不同瀏覽器中的位置不同

回答

相關問題