Подтвердить что ты не робот

Где потерянные пиксели идут в процентном макете CSS?

Возможный дубликат:
Равномерно распределенная высота дочерних элементов с CSS

Позволяет сказать, что у меня есть дизайн с 6 DIV, которые остаются поплавком с шириной 16.666%. Таким образом, размер документа разделяется на 6 частей.

Теперь, если у меня есть размер документа, скажем, ширина 620 пикселей, это сделает каждую часть 103.333px. Так как я не знаю экранов, которые могут показывать частичные пиксели:) Интересно, как браузер обрабатывает частичные пиксели.

Вот мой тестовый файл: http://jsfiddle.net/dhQh2/ (просто измените размер окна, чтобы получить результат)

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

4b9b3361

ОТВЕТЫ

Ответ 1

Если, например, вы используете ширину %, а точная ширина должна быть 103.333px, тогда браузер должен принять решение о том, как отображать это.

Различные браузеры принимают разные решения, читайте эти ссылки для получения дополнительной информации:

Мне особенно нравится это объяснение от Джона Резига/Дэвида Барона о том, почему это даже проблема:

Я говорил об этом с некоторыми Разработчики Mozilla и Дэвид Барон хорошо объяснил ситуацию:

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

  • 4 смежных объекта шириной/высотой 25% (например), начиная с одного края контейнера должны заканчиваться точно в другой край; никогда не должно быть дополнительный пиксель в контейнере и они никогда не должны быть завернуты из-за как пиксель в ширину

  • объекты, которые логически смежны, должны всегда касаться визуально; там никогда не должен быть пиксельным зазором или пикселем перекрытия из-за ошибки округления

  • объекты с одинаковой шириной должны занимать одинаковое количество пикселей

  • границы объектов должны всегда (визуально) быть сглажены к определенному пиксельной границы на дисплее (они никогда не должно быть размытым)

Одна жертва [Mozilla] обычно (3), за исключением границ где мы жертвуем (1) округлением ширины к пиксельным границам ранее.

См. этот вопрос для исправления JavaScript, который обеспечивает согласованность:

Равномерно распределенная высота дочерних элементов с CSS

Другой актуальный вопрос:

Учитываются ли десятичные знаки в ширине CSS?

Ответ 2

Они идут в небесах пикселей;)

Просто шутишь. Скорее всего, разные браузеры имеют дело с ним по-разному.

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

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

Очень интересный вопрос: неплохо было бы управлять этим поведением с помощью css.

Ответ 4

Firefox 4:

У div 6 этих полей есть граница. Когда вы медленно изменяете размер всего окна, вы видите, что граница "прыгает". Это означает, что все div имеют одинаковую ширину, но сумма меньше/больше, чем 100%. Когда вы изменяете размер только содержащего пикселя div за пикселем, вы видите, что не все divs изменяют ширину одновременно.

Ответ 5

В зависимости от того, какой браузер вы используете, что происходит. Некоторые браузеры могут округлить значение. Некоторые заставляют его округлять (math.ceil в некоторых langauges), а некоторые округляют или "усекают". Например, Google Chrome усекает десятичные знаки.

Вы можете легко протестировать эффекты этого путем печати, а затем проверить размер в редакторе краски (paint, paint.net, Adobe Photoshop и т.д.).

Очень интересный вопрос, однако:)