Проблемы со стилем в Safari

Question

Я уже некоторое время работаю над сайтом, проводя большую часть моего тестирования в Chrome, Firefox и IE. Когда я заканчиваю, я пытался просмотреть его в Safari (на Mac, iPad и iPhone). Я заметил, что некоторые элементы в сафари неуместны. Я пытался играть с CSS, но мне не повезло.

Страницу можно посмотреть здесь - http://staging.princewebdesigns.com/gallais/

См., В частности, логотип (выталкиваемый вниз в баннер), шрифт лозунга в баннере (выход за пределы баннера и выходящий слишком далеко влево), перенос заголовка «Featured Work», перенос названия проекта и упаковка нижнего колонтитула.

Вот как должна выглядеть страница - http://staging.princewebdesigns.com/gallais/images/chrome.png

Чтобы посмотреть, как это выглядит на моем iPhone, измените ссылку выше на ... / iphone.png

Любая помощь приветствуется.

Answer 1

Проблема (я думаю) в том, что у вас увеличен текст в вашем браузере.

Я загрузил страницу в Safari 5.1 в Mac OS 10.7.3 и изначально загрузился нормально.Когда я увеличил изображение, макет остался нетронутым.Как только я попытался увеличить только текст, макет сломался в соответствии с вашим описанием.

При этом, возможно, вы захотите серьезно подумать о том, как сделать макет более «гибким» в случае, если у пользователя естьих размер текста увеличился.Например, в IE по умолчанию используется полное масштабирование страницы, но пользователь может увеличить размер текста, не считая масштабирования.В этих ситуациях стоит проверить ваш макет, чтобы убедиться, что он полностью не сорвется.Я не говорю, что это должно быть идеально , но все же разборчиво.

Одна идея - попробовать разные юниты.Я обнаружил, что при объявлении горизонтальных длин (например, на полях слева) с использованием относительных измерений работает, но при объявлении длин вертикальных (например, на полях) с использованием измерений в пикселях работает лучше.Для сверхкритических элементов, таких как логотип сайта, positon: absolute может быть хорошим маршрутом.