Question

似乎某些新版本的Chrome（约20版）引入了一个新的错误渲染CSS。

这应该是什么： correct rendering

新Chrome如何显示它： incorrect rendering

这是代码（jquery-ui）：

<a href="#" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowreturnthick-1-w left" style="
"></span>Up</a>

Firefox和以前版本的Chrome正确呈现代码。

我知道我们无法修复此错误，但是有办法解决它吗？

提前致谢

Answer 1

我在IE9中检查过并没有按预期进行包装。

从一些进行大量挖掘，我认为这是一个Chrome 21错误，虽然似乎已修复但我仍然在Chrome 24中看到类似的问题。

Chrome 21似乎存在quite a few（字体）渲染问题，例如在release blog post上，我发现了一个相关的WebKit错误Float imprecision causes incorrect wrapping in LineLayout with subpixel layout 显然是在Chrome 22中已修复。但是报告错误换行的Chrome错误仍然是being reported，对于最后一个错误的jsFiddle example，在Chrome 24中我仍然没有破坏，而在IE9中则没有/ p>

一部分在WebKit bug中脱颖而出：

实际上意味着该值几乎可以关闭1

我将其解释为“宽度几乎可以偏离1px”，实际上将 Up 锚标记的宽度从计算出的width:31px更改为硬编码{{1} }纠正该菜单项的问题。但是，这不是一般修复，因此我建议删除导致该错误的因素，即 float 属性。

将width:32px课程从.left更改为：

{ float:left }

看起来它解决了这个问题。但是，对于IE 6或7访问者来说，这不会“按原样”运行（请参阅http://caniuse.com/#search=inline-block）。如果您需要网站在这些旧版浏览器上的行为相同，可以采取相应措施 - How to fix display:inline-block on IE6?

最后，如果这种方法可以接受，我会将CSS .left { display: inline-block; vertical-align: top; }规则重命名为更具代表性的应用位置，例如.left： - ）

Answer 2

将white-space: nowrap添加到<a>代码。

Answer 3

我认为诀窍是将<a>交换为<div>，但由于渲染是由jquery-ui完成的，因此可能会很棘手。我会试着找到一种方法，我会在这里发布。