Ошибка в процентах по размеру в процентах по WebKit: есть ли способы обхода?

Question

Я испытываю то, что кажется ошибкой в ​​визуализации WebKit ширины плавающих элементов, когда у них есть поля.

Следующая оказывает, как можно было бы ожидать в Firefox (3.6) и WebKit (Chromium 5,0):

<div style="width: 100%; background-color: green;"> 
    <div style="background-color: red; float: left; width: 50%;">n</div> 
    <div style="background-color: red; float: left; width: 50%;">n</div> 
    <div style="clear: both;"></div> 
</div> 

То есть, как полностью красной коробке, без зеленого фона показа.

Теперь попробуйте это:

<div style="width: 100%; background-color: green;"> 
    <div style="background-color: red; float: left; width: 40%; margin-left: 10%;">n</div> 
    <div style="background-color: red; float: left; width: 50%;">n</div> 
    <div style="clear: both;"></div> 
</div> 

Что ожидается такая же, как, как и раньше, на 10% от коробки на левой стороне, чтобы быть оставлено зеленым исключением. Это то, что видно на Firefox.

Однако в браузерах WebKit один пиксель зеленого цвета остается в правой части окна: плавающие элементы больше не заполняют его полностью.

Проблема, кажется, сложная, когда используются больше поплавков и полей, в результате чего большая часть не регистрируется.

Это ошибка? Ошибка округления? Это, конечно, не то, что я ожидал. И что еще более важно, что я могу сделать, чтобы обойти это?

---

EDIT: После долгих поисков я обнаружил, что это сообщение об ошибке; вероятно, ошибка округления, как подозревалось: https://bugs.webkit.org/show_bug.cgi?id=5531

Мой самый важный вопрос по-прежнему стоит: есть ли какой-либо путь вокруг ошибки?

Answer 1

Я подозреваю, что для этого не существует магии. Браузеры интерпретируют размеры математически по-разному. Есть еще один вопрос, слегка связанный с этим here, который является конкретной проблемой, с которой я столкнулся. Существует более подробная информация here. Однажды я прочитал замечательную статью, объясняющую проблему очень точно, но я потерял закладку. Я попытаюсь найти его снова, чтобы опубликовать его здесь.

По существу, разные браузеры округляют десятичные значения пикселей по-разному. Итак, короткий ответ: вы никогда не получите точное кросс-браузерное решение, пока существуют эти различия. Конкретная проблема, с которой я столкнулся, - это то, что было описано в моей первой ссылке: даже без использования процентных значений (фиксированные размеры пикселей) я столкнулся с двумя «сторонами» между браузерами, в которых вертикальное выравнивание некоторых элементов было бы иным: Firefox и Internet Explorer , с одной стороны, и Opera, Chrome и Safari - с другой.

Но это зависело от точных значений высоты строки и размера шрифта, которые я использовал, поэтому иногда я получаю различия даже между Firefox и IE или другой комбинацией. Без использования условного CSS я мог только уменьшить проблему до этих двух групп, а затем использовать условный CSS для настройки полей в Opera и Chrome.

Итак, чтобы подвести итог, насколько я знаю, я боюсь, что вам придется использовать условный CSS. Ура!

Answer 2

Возможно, что-то вроде этого?

<div style="width: 100%;"> 
    <div style="background-color: green; float: left; width: 10%;"></div> 
    <div style="background-color: red; float: left; width: 40%;">n</div> 
    <div style="background-color: red; float: left; width: 50%;">n</div> 
    <div style="clear: both;"></div> 
</div>