字体粗细在显示为块时发生变化

Question

我正在尝试创建那些著名的导航栏，但我遇到了一个奇怪的问题...

我创建了一个 JSFiddle 来显示我的代码和我的问题：JSFiddle

基本上，当我将鼠标悬停在“2”菜单上时，我的下拉内容显示为块（之前它被设置为 none），我的整个文档 font-weight 正在改变.. .

两件事：

• 当我将 .dropdown-content 设置为 display: block 时，我没有遇到这个问题
• 其次，当我将我的 .head1 position 设置为除 fixed 之外的任何其他内容时，我没有遇到此问题

提前感谢您提供任何线索！

我忘了说但这只发生在 Safari 上...

Answer 1

尝试添加

body{
  -webkit-font-smoothing: subpixel-antialiased;
}

给你的CSS。当我将它添加到您的 JSFiddle 中时，它在 Safari 中为我工作。

请看：Font weight turns lighter on Mac/Safari