1

嘿伙计们，我正在尝试使用简单的背景颜色和填充来设计客户的文章 h1。我需要文本在填充内垂直和水平居中，但我发现 OS X 和 Windows 之间存在基线差异。至少这是我最好的猜测。以下是违规元素的具体代码：

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

以下是截图：

OS X：http: //i54.tinypic.com/2a0bx1v.png

视窗：http: //i56.tinypic.com/2gv4vie.png

您会注意到它在 Windows 上渲染得很好，但在 OS X 上却高了几个 px。它们在整个浏览器中渲染相同，唯一的区别在于操作系统之间。字体是流沙书，正在通过@font-face 实现。如果您需要查看该站点的工作版本，请访问 http://angryg.nom.es/rosebud。如果您确实设法检查了它，您会注意到我在主页底部的静态内容页脚上遇到了同样的问题。

无论如何，任何帮助将不胜感激。

4

3 回答 3

2

您的字体文件可能不正确。
我对本地安装的 webfont 也有同样的问题。谢天谢地，谷歌提供了与 webfont 相同的字体，为我解决了这个问题。

于 2012-12-13T09:21:42.987 回答
2

您需要为特定浏览器（痛苦）指定行高，使用这种类型的属性：1.1 等，而不是指定像素，根据我的经验，它效果更好。

此外，仍然在 Mac 中，在 Safari 和 Firefox 之间，您会注意到行高之间的差异！所以这不仅仅是 OSX 与 Windows。

于 2011-03-19T15:34:32.127 回答
0

操作系统的默认字体不同，因此将 a 添加font-family: Arial到您的元素 css。它应该在 OSX 和 Windows 中工作，因为它们都支持 Arial。

于 2011-03-19T15:26:03.943 回答