为什么<a> with the same height and line-height within an <li> appear taller in Safari than in other browsers despite using a reset?</li></a>

Question

以下是该网站的链接：http://nasracing.com/mobile/tal-moreeb/

问题在于顶部的3行菜单。

在Chrome，Firefox和IE中，它按预期工作。 #nav＆gt; li标签的高度为14px，它们从标签中得到（这些标签设置为@ height：14px; line-height：14px;）。但是，在Safari中#nav＆gt; li标签呈现高度为18px。

在检查会导致这种情况发生的因素时，我看不到任何东西。有人有任何想法吗？

编辑：我正在使用由此http://www.cssreset.com/scripts/eric-meyer-reset-css/进行的重置。我还测试了normalize.css

编辑：在FF 29，Chrome 34，IE 8中正常工作。在Safari 5 +中出现问题

Answer 1

<强>原因：

浏览器引擎使用不同的默认值，或者（在这种情况下更可能是）单位。

您提到的示例可能是由引擎使用1.1em而不是1em用于<li>标记，它会在子元素中显示，或者在父元素中使用非100%百分比。然后有一些浏览器（错误地）处理%和em单位相同。

<强>解决方案：

使用重置/规范化样式表，例如： http://necolas.github.io/normalize.css/

技术位：

我不会去这里，但是你可以通过比较WebKit default stylesheet和其他浏览器来看看有什么区别。在Chrome中调查此类问题时也可以使用它，它可以显示每个元素的继承值：右键单击Chrome中的页面元素，选择“Inspect element”，选择右侧的“Computed”，然后选中“Show Inherited Properties”。 Safari可能有类似的功能或插件。