Chrome и Opera терпят неудачу при использовании поплавков

Я использую поплавки при указании размеров элемента. Пожалуйста, посмотрите этот jsfiddle jsfiddle.net/yMTGJ Но и Chrome, и Opera не могут настроить правильную ширину, и в результате разрыв в один пиксель между двумя элементами div, как видно из изображения i.stack.imgur.com/ O9ZxW.png Не могут ли Chrome и Opera правильно обработать число с плавающей запятой? Почему такой разрыв в один пиксель?


google-chrome css opera
person Hitch    schedule 14.09.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

это происходит потому, что вы указываете ширину как 466.5px, которая округляется до 467px другими браузерами (например, firefox). chrome пытается отобразить это правильно, поэтому есть линия в один пиксель, которая отображается в сочетании красного и желтого цветов (что сбивает с толку браузер и выглядит как пробел, но не является пробелом).

чтобы избежать этого, не используйте половину пикселей для указания размеров (как, по вашему мнению, должен выглядеть пример? хром делает именно то, что я ожидал, но я не знаю вашего намерения использовать половину пикселей).

взгляните на http://jsfiddle.net/Lupna/, где я отрегулировал ширину внешнего div до 932px и внутренние до 466px - отлично работает на хроме.

РЕДАКТИРОВАТЬ:
другое решение, которое заставит все браузеры отображать одинаково, если вам нужна ширина 933px, состоит в том, чтобы создать пробел самостоятельно, который должен быть там: http://jsfiddle.net/eS7Qd/

person oezi    schedule 14.09.2011
comment
Итак, 933 (ширина родителя) / 2 (количество детей) = 466,5, вот почему. - person Hitch; 14.09.2011
comment
Но я до сих пор не понимаю, почему существует так называемый разрыв. - person Hitch; 14.09.2011
comment
Пример должен выглядеть следующим образом: один ребенок занимает 50%, а другой — 50%, при этом разрыва быть не должно. - person Hitch; 14.09.2011
comment
потому что есть строка 1px, наполовину желтая, наполовину красная, которая просто не может отображаться браузером (возможно, эта линия должна быть оранжевой, а не белой, но вы не получите (и не должны) резкого края) - person oezi; 14.09.2011
comment
К сожалению, это не так просто, поэтому 932px мне не подходит. - person Hitch; 14.09.2011
comment
Я понимаю, что вы имеете в виду под наполовину желтым и наполовину красным, но это ужасно, что Chrome и Opera не могут работать так, как это делает Firefox. - person Hitch; 14.09.2011
comment
@Hitch: Это непростая проблема. Ни один из разных результатов между браузерами не является неправильным, просто... отличается. Дополнительная информация: ejohn.org/blog/sub-pixel-problems-in- CSS. - person thirtydot; 14.09.2011

arrow_upward
1
arrow_downward

Вот ваша проблема: width: 466.5px; Десятичная точка не поддерживается повсеместно. Некоторая информация и возможное решение: http://www.latentmotion.com/browsers-trim-pixel-decimals/

person Andrius Virbičianskas    schedule 14.09.2011

arrow_upward
1
arrow_downward

Как сказано выше, проблема с половинным пикселем. Мониторы работают и пиксели представляют собой блок света, который нельзя разделить пополам. Некоторые браузеры могут попытаться решить эту проблему, но при этом вы не сможете получить согласованный результат во всех браузерах.

Я бы порекомендовал вам работать с шириной 960 пикселей и использовать что-то вроде http://www.960.gs.

Вы не можете заставить это работать, так как это недействительный CSS.

person GaryDevenay    schedule 14.09.2011