OS X 和 Windows 之间的文本渲染会影响我的填充吗？

发布于 2024-10-24 07:59:35 字数 861 浏览 1 评论 0原文

大家好，我正在尝试使用简单的背景颜色和填充来设计客户的文章 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

Windows：http://i56.tinypic.com/2gv4vie.png< /a>

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

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

原文

Hey folks, I'm attempting to style a client's article h1's with a simple background color and padding. I need the text to be centered vertically and horizontally within the padding, but I'm finding there's a baseline difference between OS X and Windows. At least that's my best guess. Here's the specific code for the offending elements:

.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;
}

Here are the screenshots:

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

Windows: http://i56.tinypic.com/2gv4vie.png

You'll notice it's rendering just fine on Windows, but it's a few px too high on OS X. They render the same throughout browsers, the only difference is between the operating systems. The font is Quicksand Book, and is being implemented via @font-face. If you need to see a working version of the site, it's available at http: // angryg.nom.es/rosebud. If you do manage to check it out, you'll notice I'm having the same problem on the static content footer at the bottom of the home page.

Anyway, any help would be greatly appreciated.

分享到QQ

分享到微博