Почему при масштабировании страницы webkit (Safari / Chrome) нарушается гибкий макет при уменьшении масштаба

Question

У меня есть веб-сайт, который годами изменял макет.То есть размер текста тела определен, и оттуда все остальные размеры являются относительными и определяются в терминах ems.Это сделало страницу полностью масштабируемой в IE 5.5 и выше, старых версиях FF и т. Д. В настоящее время это уже не так важно, поскольку в современных браузерах имеется масштабирование страницы, а не увеличение текста.Масштабирование страниц работает во всех браузерах для меня IE, FF, Opera, а масштабирование работает в браузерах на основе Webkit.Но уменьшение (менее чем на 100%) нарушает макет, и я не понимаю, почему это так.

Вот пример страницы со страницы, как она есть, чтобы попробовать это:

Почему макет ломается в Safari (я использовал 5.0.5 для тестирования) и Chrome при уменьшении масштаба?В Chrome он работает как два шага уменьшения, а затем ломается.Нет смысла уменьшать масштаб, так что это скорее академический вопрос.Я хотел бы понять, что происходит.

Спасибо.

Answer 1

Это может произойти из-за некоторых стилей браузера по умолчанию, которые основаны на px вместо ems. Например, если вы используете инспектор webkit в Safari, <ol class="navi_rechts"> имеет таблицу стилей агента пользователя, которая включает -webkit-padding-start: 40px. Возможно, стоит воспользоваться сбросом CSS или проверкой подобных вещей в любых испорченных элементах.

РЕДАКТИРОВАТЬ Это также может быть проблема округления с некоторыми из ваших значений. Я не уверен, сколько десятичных знаков будет смотреть Safari, но я предполагаю, что такие вещи, как padding: 0.46154em 0em 0em 0.92308em; на h1.navi_parent_rechts, могут быть слишком конкретными.