Ошибка поплавков в WebKit: есть ли обходные пути? - PullRequest
Новая
       31

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

4 голосов
/ 01 июля 2010

Я испытываю ошибку в рендеринге 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 один пиксель зеленого цвета остается с правой стороны поля: плавающие элементы больше не заполняют его полностью.

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

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

РЕДАКТИРОВАТЬ: После долгих поисков я обнаружил, что это сообщенная ошибка;Вероятно, ошибка округления, как подозревается: https://bugs.webkit.org/show_bug.cgi?id=5531

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

Ответы [ 2 ]

0 голосов
/ 15 марта 2013

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

<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>
0 голосов
/ 27 июня 2012

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

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

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

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

...