html - 谷歌浏览器中的 H3 float 问题

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;
}