Моя лучшая догадка, почему это происходит из-за ошибок округления при уменьшении масштаба.Например, если вы представляете себе коробку шириной 250 пикселей, которая содержит две боксы бок о бок шириной 125 пикселей каждая.Очевидно, что они подходят друг к другу.Если вы уменьшите изображение до половины, то размер внешнего блока будет 125px, а внутреннего - 62.5px, каждый из которых округляет до 63px, и половинные пиксели будут такими же маленькими, как вы).Эти два теперь имеют общую ширину 126 пикселей, поэтому они больше не подходят друг к другу, и один должен идти под другим.
Я думаю, что это в основном принцип, который вы используете здесь на работе.Лучшее решение, которое я вижу, - сделать два бокса бок о бок сужением и расположить один вправо так, чтобы ваша правая граница не была нарушена.это может означать немного больший разрыв по центру, но этот разрыв, возможно, поглотит ошибки округления при уменьшении масштаба ...
Редактировать:
Как вы заметили,границы - главное, что вызывает путаницу.Они могут быть сняты с внешних контейнеров и помещены во вложенный контейнер, предназначенный просто для добавления границ.
http://jsfiddle.net/chrisvenus/pdQrQ/6/
Выше приведена скрипка (основанная на вашем), которая создает внутренний DIVтеги, которые содержат границу, в то время как плавающие контейнеры вообще не имеют границы.Теперь это кажется достаточно надежным для работы в IE8, FF7.0.1 или Chrome 14.0.835.202.
Изменилось добавление div в HTML и замена некоторых классов между ним и его родителем.Появился новый класс innercontainer, который устанавливает высоту и ширину на 100%, чтобы гарантировать, что он заполняет вмещающий ящик (и, таким образом, границы находятся там, где они нужны. Также я изменил ширину нижнего ящика, чтобы он выстроился правильно.
Дайте мне знать, если это вам.