css - Chrome 中的小宽度

Question

我在使用 Google Chrome(版本:15.0.874.121 m)时遇到了一个问题:当一个 block 的宽度小于 0.99 像素(精确)时，它显示不正确 — 内部文本的宽度。

示例代码:

<style>
.frame { float: left; border: solid; }
.frame div { width: 0.98px; overflow: hidden; }
</style>
<div class="frame"><div>Long text</div></div>

这是一个现场演示:http://jsfiddle.net/bDTgX/1/

相同的代码在 Firefox、Opera 和 Internet Explorer 中运行良好。

可能是什么原因(Chrome 中的错误？)——如何解决？

Answer 1

我不会说这真的是一个错误，但这正是 webkit 舍入子像素指标的方式。请注意，它正在考虑将 .99 向上舍入，其他任何向下舍入......

http://jsfiddle.net/bDTgX/9/

如果它向下舍入为零，它会被一起忽略，因为它假定您犯了一个错误。因此，任何小于 .99px 的东西都会被忽略并默认为 with: auto;如果您不喜欢这种方式，请使用 max-width: 它将符合它的零像素。但是四舍五入已经设置好了，你只需要处理它。亚像素渲染在 webkit 上不受支持，就像在 gecko (firefox) 上一样。