Question

我的主菜单填充有一个小问题，我希望有人可以帮助我。在Firefox和IE中，一切都很好。但是，在Chrome和Safari中，填充略有不同。

现在，我将左/右填充设置为1.82em，在Chrome / Safari中的“联系我们”之后会有一些未使用的空间。我也尝试将其设置为31px，最终在Firefox / IE中完美呈现，但在Chrome / Safari中，它将最后一个菜单项放在新行上。

我已经读过Firefox和Chrome渲染填充完全相同，所以我对此感到茫然。我可以用java来解决这个问题，并为不同的浏览器使用不同的CSS，但我宁愿避免这种情况。有什么想法吗？

Answer 1

你实际上有两个问题：

1.82em将呈现不同的（“填充”问题）
文本将以不同的方式呈现，为每个项目提供不同的“基本宽度”（这就是为什么当您使用像素进行填充时，它也不起作用）

像往常一样，你有很多方法可以解决。

一种方式：

给你所有的LIs类名或id并设置它们的宽度，杀死左/右边距，然后设置text-align：center;

HTML：

<ul class="menu-mainmenu">
  <li class="menu-mainmenu-0 current active first">
    <a class="current" href="/eme/"><span>Home</span></a>
  </li>
  <li class="menu-mainmenu-1">
    <a href="/eme/about"><span>About the Emergicenter</span></a>
  </li>
  <li class="menu-mainmenu-2">
    <a href="/eme/staff"><span>Meet the Staff</span></a>
  </li>
  <li class="menu-mainmenu-3">
    <a href="/eme/forms-and-resources"><span>Forms &amp; Resources</span></a>
  </li>
  <li class="menu-mainmenu-4">
    <a href="/eme/ask-the-doctor"><span>Ask the Doctor</span></a>
  </li>
  <li class="menu-mainmenu-5 last">
    <a href="/eme/contact"><span>Contact Us</span></a>
  </li>
</ul>

CSS：

.menu-mainmenu {width:960px;}
.menu-mainmenu li {text-align: center; padding:12px 0 20px;}
.menu-mainmenu-0 {width:100px;}
.menu-mainmenu-1 {width:217px;}
.menu-mainmenu-2 {width:155px;}
.menu-mainmenu-3 {width:191px;}
.menu-mainmenu-4 {width:158px;}
.menu-mainmenu-5 {width:139px;}

Answer 2

你应该注意webkit将em舍入到一个小数点，因此，你的1.82em变为1.8em，当你计算像素级实际上是什么时，你甚至可能得到额外的像素差异。如果你需要它，它们很棒，但如果你正在寻找像素完美的话，很难处理它。

Answer 3

将#jsn-page宽度增加到961px会使链接上的31px填充在chrome中运行。

编辑：请参阅下面的丹尼斯回复。每个项目的固定宽度将是最可靠的。

.main-menu > li > a { 
    width:160px;
    text-align:center;
    padding: 12px 0px 20px 0px;
}

Answer 4

这是一个替代答案，因为它取决于您需要支持的浏览器。如果您不需要担心ie6或ie7，那么您可以使用display：table-cell。

http://jsfiddle.net/BU9Gb/

填充Chrome和Firefox之间的差异

4 个答案: