Chrome 和 Firefox 之间的填充差异答案

【问题标题】：Padding differences between Chrome and FirefoxChrome 和 Firefox 之间的填充差异
【发布时间】：2011-11-22 18:12:11
【问题描述】：

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

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

我读过 Firefox 和 Chrome 渲染填充完全相同，所以我对这个感到茫然。我可能可以用 Java 摆脱这种情况，并为不同的浏览器使用不同的 CSS，但我宁愿避免这种情况。有什么想法吗？

【问题讨论】：

这个问题不再那么有用了，因为指向源的链接已经消失了......

标签： css cross-browser padding

【解决方案1】：

你实际上有两个问题：

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

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

一种方式：

给你所有的 LI 类名或 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;}

【讨论】：

我什至没有想到这一点，但这完全有道理。如果我有野心，我可能会尝试这种方法。谢谢！
“将你的#jsn 页面宽度增加到 961px 使你的链接上的 31px 填充在 chrome 中工作。”它还会在您的布局中创建 1px 的间隙。这可能是解决问题的最糟糕的方法。如果可以的话，我会投反对票。

【解决方案2】：

将您的#jsn 页面宽度增加到 961px 会使链接上的 31px 填充在 chrome 中工作。

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

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

【讨论】：

我敢打赌它与此直接相关：stackoverflow.com/questions/6614204/…
是的，我也注意到了。这可能是唯一的解决办法。谢谢！
哎哟。这种方法在主布局中引入了 1px 的间隙。如果您像我一样发现布局中的空白不可接受，请参阅下面的答案。

【解决方案3】：

您应该注意，webkit 将 em 舍入到小数点后一位，因此，您的 1.82em 变为 1.8em，当您计算实际像素级别的值时，您甚至可能会得到额外的像素差异。如果您需要 em，它很棒，但如果您正在寻找像素完美，则很难使用它。

【讨论】：

感谢您提供的信息，这绝对是个好消息。我想使用 31px 作为填充，因为它在 FF/IE 中完美呈现，但我不确定 Chrome/Safari 中的额外空间来自哪里。

【解决方案4】：

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

http://jsfiddle.net/BU9Gb/