Проблема флюида CSS в CSS 12

Question

Есть ли вероятность того, что некоторые браузеры по-разному рассчитывают% ширины?

Вот код: http://jsfiddle.net/yuliantoadi/9eqMg/2/

html:

<div class="grid_6">
grid 6
</div>
<div class="grid_6">
grid 6
</div>
<div class="grid_1">
grid 1
</div>
<div class="grid_2">
grid 2
</div>
<div class="grid_4">
grid 4
</div>
<div class="grid_5">
grid 5
</div>

css:

[class^=grid_]{
    float:left;
    margin-left:1%;
    margin-right:1%;
    margin-bottom:5px;
    background-color:red;
}
.grid_1 {
    width:6.333%;
}
.grid_2{
    width:14.666%
}
.grid_4{
    width:31.333%
}
.grid_5{
     width:39.666%;
 }
.grid_6{
    width:48%;
}

12 В Firefox все в порядке с сеткой, затем я проверяю в Safari и обнаружил проблему.Вы можете увидеть это, если откроете код в Safari или Chrome, после сетки 5 будет немного места.

Answer 1

Я бы сказал, что это происходит, потому что Safari округляет 39,666% вверх, в то время как firefox округляет его ВНИЗ.Я бы порекомендовал форсировать округление.Вместо перехода на 3 знака после запятой, перейдите на нет.Однако вы можете получить неровную сетку.Попробуйте и позвольте мне знать.

Answer 2

В текущей реализации браузера есть проблемы с субпикселями. Подробнее: ejohn.org/blog/sub-pixel-problems-in-css/

Answer 3

Мой опыт показывает, что ширина в процентах обрабатывается по-разному - некоторые браузеры округляют вверх, некоторые округляют вниз, некоторые просто удаляют любые конечные десятичные дроби из фактической ширины PIXEL (помните, вы не можете отобразить половину пикселя). Но спроси меня не почему и когда.