Уменьшение размера браузера вызывает проблемы с дизайном

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

Найдите Zoom Out в меню просмотра браузера и щелкните его несколько раз.
Обратите внимание, как это влияет на меню и боковую панель.

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

Конечно, должно быть лучшее решение этой проблемы. Знаете ли вы?

Ответ 1

AFAIK, настольные браузеры не используют подпиксельное разрешение для макетов (в настоящее время в WebKit есть ожидающая реализация, но нет слов в других браузерах). Это причина, по которой вы не можете использовать доли пикселя при определении размеров в CSS. Масштабирование масштабирует только свойства CSS с помощью общего коэффициента масштабирования и округляет оставшуюся часть (я предполагаю, что он накладывает значения), так что механизм компоновки может работать с целыми числами вместо чисел с плавающей точкой.

Нет жесткого решения, кроме попытки выбрать значения пикселей, которые равномерно распределяются между уровнями масштабирования. Другим подходом было бы использование определения ширины на основе процентных ставок для контейнеров. Таким образом, браузер округляет цифры правильно для вас, и если общая ширина обоих контейнеров никогда не превышает 100% (вам может потребоваться вычесть десятую или hundreth процента из-за округления), вы должны быть хорошо, чтобы перейти на все уровни масштабирования.

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

EDIT: Пример: размер столбцов с использованием процентов

#left-area { width: 66.3179%; /* 634/956 */ }
#right-area { width: 33.6820%; /* 322/956 */ }

Ответ 2

В верхнем меню вы можете попробовать установить div обертывание двух ul на position:relative, а затем установить ul#mega на position:absolute с помощью дополнительного объявления CSS right:0. Абсолютное позиционирование кажется хорошим кросс-браузерным способом решения таких проблем.

Для боковой панели вы можете установить position:absolute и right:0 на div#sidebar.

Процесс мышления 1 для проблемы Safari:

Если в верхнем меню больше ширины меню "больше", попробуйте установить ul#secondary-menu на position:relative;z-index:11;. Затем вы можете добавить padding-left к дочернему элементу li.mmore ul#mega, чтобы компенсировать различные оценки ширины браузера при различных масштабированиях, например, путем подметания li под другим li. Затем, чтобы расширить цветную линию, передайте объявления border-bottom из дочернего элемента a из li.mmore в li.mmore и соответствующим образом настройте высоту.

Ответ 3

При изменении размера браузера значения пикселей обязательно округляются, и это приводит к возникновению проблемы, при которой sidebar и left-area не имеют достаточного места для размещения рядом друг с другом, и вы можете видеть это снижается до нижней части страницы.

Ширина main-content равна 956px, left-area: 634px, sidebar: 322px.

634 + 322 = 956.

При масштабировании значения

633 + 321 = 954 > 953

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