Question

在构建following menu时，我遇到了一个奇怪的情况。在Chrome / Safari（Mac）上，当我向padding-left: 7px;添加<ul>时，最后一个菜单项会中断，但这是我能够以Firefox和Chrome for Windows为中心显示菜单的唯一方式

我尝试使用display: block; margin: 0 auto;将菜单居中，但这也不起作用。我想我已经没有可能的解决方案了。

期待您的回复，

干杯！

Answer 1

这可能是因为Chrome渲染的字体略有不同，并且会有一些像素差异（在这种情况下，屏幕宽度约为4或5像素）。

这是我前一段时间拿到的一个小技巧，无需填充等中心导航：

.site-header .site-nav ul {
  display: table;
  margin: 0 auto; }

.site-header .site-nav li {
  display: block;
  float: left; }

请注意，除了自动左右之外，ul上没有其他边距或填充。您还需要使用clearfix清除ul，因为li现在已经浮动。

或者，如果您不喜欢使用display:table，则可以对ul上的display:inline-block执行相同操作，然后在text-align:center上设置.site-nav

Answer 2

将填充左下降到6px，然后将23px缩小到22，它应该解决问题并使其居中。

Answer 3

由于使用了webfont，因此存在此问题。在菜单项上使用display:table也对我有用。

但我选择了其他解决方案：在菜单元素上设置font-family到empty。并在li元素上重新设置font-family，解决了这个问题。