1

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

这里应该是什么： 正确渲染

以及新 Chrome 的显示方式： 不正确的渲染

这是代码（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 可以正确呈现代码。

我知道我们无法修复这个错误，但有没有办法解决它？

提前致谢

4

3 回答 3

3

我签入了 IE9，没有按预期包装。

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

我在browsershots.org上检查了您的网站，发现损坏似乎在 Chrome 20.0.1132.57 Chrome 20.0.1132.57 http://api.browsershots.org/png/original/fa/fac627c3240bca39ef441ef4a5379a41.png和 Chrome 21.0.1180.89 Chrome 21.0之间.1180.89 http://api.browsershots.org/png/original/25/256df60f8f44dfa2fda3b7270094aa96.png

Chrome 21似乎有很多（字体）渲染问题，例如在发布的博客文章中，我发现了一个相关的 WebKit 错误Float imprecision 导致 LineLayout 中的子像素布局不正确，这在 Chrome 22 中显然已修复。但是 Chrome报告错误包装的错误仍在报告中，对于最后一个错误的jsFiddle 示例，它在 Chrome 24 中对我来说仍然是坏的，而不是在 IE9 中

WebKit 错误中突出的一部分：

有效地意味着该值几乎可以偏离 1

我将其解释为“宽度可能相差近 1px”，实际上将Up锚标记的宽度从计算width:31px更改为硬编码width:32px可以更正该菜单项的问题。然而，这不是一个通用的修复，所以我建议删除导致错误的因素，即float属性。

.left将您的课程更改{ float:left }为：

.left {
    display: inline-block;
    vertical-align: top;
}

看起来它解决了这个问题。但是，对于 IE 6 或 7 访问者来说，这不会“按原样”工作（请参阅http://caniuse.com/#search=inline-block）。如果您需要网站在那些旧浏览器上的行为相同，有一些方法可以解决这个问题 -如何在 IE6 上修复 display:inline-block？

最后，如果这种方法可以接受，我会将 CSS.left规则重命名为更能代表属性应用位置的名称，例如.nav-icon:-)

于 2012-10-16T14:28:51.170 回答
1

添加white-space: nowrap到<a>标签。

于 2012-10-16T11:39:08.053 回答
0

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

于 2012-10-16T11:55:43.437 回答