Zoom изменяет макет дизайна

Я работаю над новым сайтом, который должен быть "идеальным" - совместим с ie6 +, ff, chrome, opera и safari.

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

Пример скрипта с проблемой: http://jsfiddle.net/pdQrQ/1/

В Chrome (14.0.835), FF (7.0.1) и IE9, при масштабировании - изменяется размер верхнего правого окна (по крайней мере, похоже на него), а затем он неправильно выравнивается с полем ниже.

Edit:
Я знаю, в чем причина - граница!

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

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

Как я могу исправить?

Спасибо!

Ответ 1

Мое лучшее предположение, почему это происходит из-за ошибок округления, поскольку он уменьшает масштаб. Например, если вы представляете коробку шириной 250 пикселей и две бок о бок, шириной 125 пикселей по ширине. Ясно, что они подходят бок о бок. Если вы уменьшаете масштаб, чтобы вы были в полуразмерном размере, внешний ящик будет 125 пикселей, а внутренние 62,5 пикселя, каждый из которых размером до 63 пикселей на половину пикселей, как можно меньше). Эти два теперь достигают общей ширины 126px, поэтому больше не подходят бок о бок, и каждый из них должен идти под другим.

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

Edit:

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

http://jsfiddle.net/chrisvenus/pdQrQ/6/

Вышеприведенная скрипка (основанная на вашем), которая создает внутренние теги DIV, которые содержат границу, в то время как плавающие контейнеры вообще не имеют границы. Теперь это кажется достаточно надежным для работы в IE8, FF7.0.1 или Chrome 14.0.835.202.

Все изменилось, добавляя div в HTML и заменяя некоторые классы между ним и его родителем. Был новый класс innercontainer, который устанавливает высоту и ширину на 100%, чтобы обеспечить заполнение содержащего окна (и, следовательно, границы там, где они нужны). Также я изменил ширину нижнего блока так, чтобы он правильно выстроился.

Сообщите мне, если это вам.

Ответ 2

Лучший способ сделать это сейчас - размер окна: border-box ",

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Fiddle: http://jsfiddle.net/oneeezy/pdQrQ/113/

Ответ 3

Рон вы пытались добавить позицию: absolute; к вашим деталям? У меня была такая же проблема, когда мой заголовок оставался центральным, но остальные мои поля css при уменьшении отображались слева. Я тогда позиционировал их абсолютно хорошо, просто добавил его на самом деле и нашел, что это сработало, стоит попробовать, я был стеной над этим сам!!

Ответ 4

Проверьте разрешения экрана на http://mqtest.io/ при различных уровнях масштабирования.

Например, мой компьютер имеет разрешение экрана при различных уровнях масштабирования. Уровень масштабирования - 110% | Разрешение экрана - 1294px x 689px Уровень масштабирования - 125% | Разрешение экрана - 1138px x 606px

Задайте максимальную или минимальную ширину медиа-запроса.