最後一個字母垂直切IE瀏覽器

我在this website的頂級導航欄中使用谷歌字體奧斯瓦德，它在所有瀏覽器中都很棒。但是，在兩個不同的IE11，安裝在兩臺不同的計算機，倍半頁面加載某些字符串的最後一個字母被切斷：最後一個字母垂直切IE瀏覽器

last letter cut

這些工作OK了IE的捕獲（綠點）和IE顯示問題（紅點）：

enter image description here

正如你所看到的，它看起來像本身與兩個瀏覽器的寬度相同的渲染，但文本，在瀏覽器這個問題的容器包裝文本不夠擴展。

最糟糕的部分是它只發生在我客戶的電腦中，我無法重現這個問題。

我做了一個擴展的研究，我嘗試很多東西：

更改字體重量
檢查沒有本地奧斯瓦爾德字體安裝在機器
使用奧斯瓦爾德從字體下載的字體Squierrel，而不是Google字體
更改字體大小，字間距，字母間距，取消激活文本轉換和文字陰影
激活/取消激活Windows ClearType

如果我的客戶端在IE瀏覽器中刷新刷新問題，頁面加載時間的一半時間確定。另外，如果他檢查代碼並激活並重新激活其中一種樣式（例如font-size），則問題將得到修復。

的問題不正常字體，或使用

UPDATE發生：

我做了一個jsfiddle minimum model再現的問題。我添加了兩個使用不同Google字體的其他文本塊，該問題僅影響Oswald字體。我的客戶說，當他使用CTRL-F5而不是F5時，問題頻繁出現。

enter image description here

在您無法訪問的jsfiddle的情況下，這裏是代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <style type='text/css'> 
      @import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300); 
      @import url(http://fonts.googleapis.com/css?family=Droid+Sans); 
      @import url(http://fonts.googleapis.com/css?family=Bowlby+One&v2); 
      body { 
       background: #ccc; 
      } 
      .container { 
       width: 158px; 
      } 
      .container h2 a { 
       text-transform: uppercase; 
       color: #fff; 
       font-size: 14px; 
       text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); 
       line-height: 1.5em; 
      } 
      .container h2 a:hover { 
       color: #ecd6bc; 
      } 
      .container.one h2 a { 
       font-family: 'Oswald'; 
      } 
      .container.two h2 a { 
       font-family: 'Droid Sans'; 
      } 
      .container.three h2 a { 
       font-family: 'Bowlby One'; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container one"> 
      <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2> 
     </div> 
     <div class="container two"> 
      <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2> 
     </div> 
     <div class="container three"> 
      <h2><a href="http://www.example.com">Suspendisse nec metus quis nunc cursus fringilla.</a></h2> 
     </div> 
    </body> 
</html>

感謝您的幫助。

來源

2014-10-31 Gustavo

當你使用標準字體時，你是否也看到了這個問題？我正在使用Windows 7和Windows 8.1測試IE11，但無法重現問題。您能否構建一個簡化的示例，其中不包含比說明問題所需的代碼更多的代碼？ – Sampson 2014-11-01 00:28:56

@JonathanSampson，我編輯了整篇文章，以回答你的問題。我做了一個jsfiddle的例子。謝謝。 – Gustavo 2014-11-03 14:57:31

你有沒有嘗試過這樣的：

white-space: nowrap; overflow: hidden;

參考，這個來源更多細節source。

來源

2014-12-10 18:39:57 Liondedan

最後一個字母垂直切IE瀏覽器

回答

相關問題