Css 填补Chrome和Firefox之间的差异

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

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

---

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

您应该注意，webkit将em四舍五入到一个小数点，因此，您的1.82em变为1.8em，当您计算像素级别上的实际值时，您甚至可能会得到额外的像素差异。em在需要时很好，但在追求像素完美时很难使用。

您应该注意，webkit将em四舍五入到一个小数点，因此，您的1.82em变为1.8em，当您计算像素级别上的实际值时，您甚至可能会得到额外的像素差异。如果您需要，em非常好，但如果您希望像素完美，则很难使用它。

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

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

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

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

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

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

---

实际上，您有两个问题：

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

和往常一样，你有很多解决问题的方法

单向：

给出所有LIs类名或ID并设置其宽度，取消左/右填充，只需设置文本对齐：居中

HTML:

---

实际上，您有两个问题：

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

和往常一样，你有很多解决问题的方法

单向：

给出所有LIs类名或ID并设置其宽度，取消左/右填充，只需设置文本对齐：居中

HTML:

---

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

相关css：

.menu-mainmenu {width:980px;display:table;}
.menu-mainmenu li {display:table-cell;}
.menu-mainmenu a {display:block;padding:15px 30px;text-align:center;}

---

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

相关css：

.menu-mainmenu {width:980px;display:table;}
.menu-mainmenu li {display:table-cell;}
.menu-mainmenu a {display:block;padding:15px 30px;text-align:center;}

---

谢谢你的信息，很高兴知道。我想使用31px作为填充，因为它在FF/IE中呈现得非常完美，但我不确定当我这样做时，Chrome/Safari中的额外空间是从哪里来的。感谢您提供的信息，很高兴知道这一点。我想使用31px作为填充，因为它在FF/IE中呈现得非常完美，但我不确定当我这样做时，Chrome/Safari中的额外空间来自何处。我敢打赌这与此直接相关：是的，我也注意到了这一点。这可能是唯一的解决办法。谢谢哎哟此方法在主布局中引入1px间隙。如果像我一样，你发现你的布局中的差距是不可接受的，请看下面我的答案。我敢打赌，这与此直接相关：是的，我也注意到了这一点。这可能是唯一的解决办法。谢谢哎哟此方法在主布局中引入1px间隙。如果像我一样，你发现你的布局中的差距是不可接受的，请看下面我的答案。我甚至没有想到这一点，但这是完全有道理的。如果我有雄心壮志，我可以试试那种方法。谢谢“将您的#jsn页面宽度增加到961px，使链接上的31px填充在chrome中工作。”这也会在布局中产生1px的间隙。这可能是解决问题最糟糕的方法。如果可以的话，我会投反对票。我甚至没有想到这一点，但这很有道理。如果我有雄心壮志，我可以试试那种方法。谢谢“将您的#jsn页面宽度增加到961px，使链接上的31px填充在chrome中工作。”这也会在布局中产生1px的间隙。这可能是解决问题最糟糕的方法。如果可以的话，我会投反对票。这个问题现在没有那么有用了，因为到源代码的链接已经消失了…这个问题现在没有那么有用了，因为到源代码的链接已经消失了。。。。