Малая ширина в Chrome

Question

Я столкнулся с проблемой с Google Chrome (версия: 15.0.874.121 м): когда ширина блока меньше 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 округляет подпиксельные метрики. Обратите внимание, что он считает, что 0,99 округлять вверх, все остальное округлять вниз ...

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

Если он округляется до нуля, он просто игнорируется, поскольку предполагается, что вы допустили ошибку. Таким образом, все, что меньше, чем .99px будет игнорироваться и по умолчанию будет с: auto; Если вам не нравится то, как это происходит, используйте max-width: и он будет соответствовать нулю px. Но округление установлено, вам просто придется иметь дело с этим. Субпиксельный рендеринг просто не поддерживается в webkit, как в gecko (firefox).

Answer 2

Существует ошибка с webkit и дробными пикселями.

http://ejohn.org/blog/sub-pixel-problems-in-css/