firefox与chrome的问题，带有粗体文本和双边框

Question

我正在网站上工作，我有一些问题希望你们能帮助我：）

1. 如果我在菜单中对文字加粗，它在Firefox中看起来过于大胆：S，但在Chrome中看起来很好。

2. 在Firefox中，＃content容器上的双边框超出阴影效果：S，但在Chrome中看起来不错。

Mac Firefox 5.0.1和Chrome 13.0.782.112上的

Screen shot：

This是我的项目。

我希望有人可以帮我解决这个问题。

如果你有我能做的更好的事情，我也很高兴听到这个：）

Answer 1

关于bold字体在浏览器之间看起来不同的第一个问题仅仅是因为浏览器以不同方式呈现文本的方式。除非你走的是使用图像的可怕路线，否则你无能为力。

您的第二个问题与border无关，而在于outline。这是因为Firefox在应用outline时解释box-shadow的方式。它将它应用于阴影之外。

您可以将以下代码放在css中以定位Firefox并将大纲重新放入：

@-moz-document url-prefix() {
    #content{
        outline-offset: -11px;
    }
}

实例：http://jsfiddle.net/tw16/n8bet/

Answer 2

@ 1：每个浏览器的字体渲染都有差异。您可以尝试使用数值而不是粗体来缩小结果范围（http://clagnut.com/blog/2228/）。另请阅读此SO条目的答案：Same font except its weight seems different on different browsers

@ 2：从#content css：

中删除此行

outline: 1px solid #B9BDBE;