在谷歌浏览器中的H3浮动问题

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>

我有一个div容器，其中包含两个h3标签，一个向左浮动，一个向右浮动。 在除Chrome以外的所有浏览器中，h3中的文本显示正确，没有任何包装。 但是在Chrome中，空格后的文字会转到下一行。

Answer 1

奇数，似乎是由这种风格引起的：

text-rendering: optimizeLegibility;

您可以通过将此样式添加到h3：

来阻止它

h3 {
  white-space: nowrap;
}