H1标签内的文本间距/填充在浏览器中不一致

Question

我正在使用HTML5和CSS3创建个人网站。在附图中，您可以快速查看问题所在。 我找不到它的原因，因为代码似乎有效。我认为它可能与浏览器怪癖有关，但我不知道哪个。

我不是很担心Opera没有渲染正确的字体，就像我使用不一致的字母间距或填充一样。 Firefox是最糟糕的。

这是HTML代码（顺便说一句，我使用的是960网格系统）：

<div id=body-wrap class="container_12">
<header class="container_12">
    <hgroup>
        <div class="grid_9">
            <h1>THIS IS A TITLE</h1>
        </div>
        <div id=lang class="grid_3">
            <a href=#>
                <img src=esp_64.png alt="Bandera de España">
            </a>
            <a href=#>
                <img src=cat_64.png alt="Senyera Catalana">
            </a>
            <a href=#>
                <img src=eng_64.png alt="British Union Jack">
            </a>
        </div>
    </hgroup>
</header>

以下是HTML的相关CSS：

h1 { font-size: 55px }
header { padding: 10px 0 }
header div h1 {
    font-family: "PTSansBold", Helvetica, sans-serif;
    color: white;
    background-color: #0a7bb4;
    text-transform: capitalize;
    padding: 0 0 0 5px;
    letter-spacing: 1px;
    word-spacing: 3px;
    height: 70px
}

提前致谢。

Answer 1

如果问题仅与gecko相关，则可以尝试使用更具体的css属性进行一些调整，例如font-size-adjust或font-stretch（可从Firefox 9.0获得）

如果这还没有解决，请尝试仅为firefox设置letter-spacing: 0（例如，只有gecko能理解的某些媒体查询）。这应该足以使标题几乎相同，即使从较旧的firefox版本也可以支持。