5

我在一个网站上工作，我有一些问题希望你们能帮助我:)

  1. 如果我在菜单中的文本上加粗，它在 Firefox :S 中看起来太粗了，但在 Chrome 中看起来不错。

  2. 在 Firefox 中，#content 容器上的双边框在阴影效果 :S 之外，但在 Chrome 中看起来不错。

Mac Firefox 5.0.1 和 Chrome 13.0.782.112 上的 屏幕截图：

这是我的项目。

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

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

4

2 回答 2

3

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

你的第二个问题不是关于，border而是关于outline. 这是由于 Firefox 解释应用outline时的方式引起的box-shadow。而是将其应用到阴影之外。

您可以将下面的代码放入您的 css 中以针对 Firefox 并将大纲带回：

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

现场示例：http: //jsfiddle.net/tw16/n8bet/

于 2011-08-13T14:18:17.143 回答
1

@1：每个浏览器的字体渲染存在差异。您可以尝试使用数值而不是简单的粗体来缩小结果范围 ( http://clagnut.com/blog/2228/ )。另请阅读此 SO 条目的答案：相同的字体，除了它的重量在不同的浏览器上似乎不同

@2：从#content css 中删除这一行：

outline: 1px solid #B9BDBE;
于 2011-08-13T14:14:11.663 回答