H3在Chrome瀏覽器中的浮動問題

Question

我有一些HTML/CSS代碼在所有瀏覽器中都能正常工作，但它突然無法在Chrome中正常工作。

這裏是例子http://jsfiddle.net/zg6y24ju/

<div class='container'> 
<h3 style='float:left;'> 
LEFT OPTIONS 
</h3> 

<h3 style='float:right;'> 
RIGHT OPTIONS 
</h3> 
</div> 

我有一個包含兩個H3標籤一個浮動左，一個右一個div容器。 在除Chrome之外的所有瀏覽器中，h3中的文本顯示正確，沒有任何換行。 但是在Chrome中，空格之後的文本會轉到下一行。

Answer 1

這是奇怪，它似乎被這種風格所導致：

text-rendering: optimizeLegibility; 

可以防止它通過添加這種風格h3：

h3 { 
    white-space: nowrap; 
}