私は壁に頭をぶつけていましたが、ついに助けを求めることにしました。マウスオーバーすると表示される 2 つのメニュー ドロップダウンがあり、リンクのマウスオーバー div に合わせます。最初のものはすべてのブラウザでうまく整列し、2番目のものはChromeを除いてすべてのブラウザでうまく整列し、約10ピクセルずれています. 考えられることはすべて試しましたが、Chrome ブラウザを他のブラウザと同じように調整することはできません。
http://www.brewawesome.comで例を見ることができます。2つのメニューは、「Beer Recipes」(完全に整列) と「My Beer Recipes」(ずれている) です。
Chrome のフォント サイズが小さすぎるため、メニューが適切に配置されていません。物件によると思いfont-variant:small-capsます。これにより、単語が大文字に変更されますが、文字のサイズはフォントの小文字になります。
クロムでは、これによりテキストが非常に小さくなっているようです。text-transform:uppercase;各ブラウザですべてのメニュー フォントを同じサイズに変更する必要があります。font-size を小さく変更する必要がある場合は、それに css font-size を適用するだけで、よりクロスブラウザで単語を大文字にする方法が得られます。
この例を別のブラウザーで見ると、バリアントを使用した場合よりもテキスト変換を使用した場合のほうが、レンダリングが向上し、テキストのサイズがより一致することがわかります。
Chrome 固有の CSS を使用し、左からの配置を減らします
@media screen and (-webkit-min-device-pixel-ratio:0) {
#divMyBeerRecipes{left:97px;}
}