H1標籤內的文字間距/填充在瀏覽器中不一致

我使用HTML5和CSS3創建個人網站。在附圖中，您可以快速查看問題所在。我找不到原因，因爲代碼似乎有效。我認爲這可能與瀏覽器的怪癖有關，但我不知道是哪一個。H1標籤內的文字間距/填充在瀏覽器中不一致

我並不擔心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 
}

在此先感謝。

來源

2012-01-17 user706600

如果問題是壁虎只與你可以嘗試做一些調整與（可從Firefox 9.0）

如果不解決更具體的CSS屬性，如font-size-adjust或font-stretch，儘量還成立letter-spacing: 0只適用於firefox（例如，只有一些媒體查詢只有gecko可以理解）。這應該足以使標題幾乎相同，即使從較舊的Firefox版本也會支持。

來源

2012-01-17 14:14:46 fcalderan

感謝您的提示，但沒有運氣。 'font-stretch'不適用於font-faces，事實上，如果我刪除了字體並使用默認字體，問題就消失了！很奇怪**。看來問題是新字體的正確渲染（我已經嘗試了幾次，總會發生，所以它不只是一個）。 – user706600

H1標籤內的文字間距/填充在瀏覽器中不一致

回答

相關問題