Введение
Хочу рассказать о баге масштабирования в IE7 и двух способах его решения. Если вы знаете что такое идеальная верстка и как браузеры масштабируют страницы, то следующие два раздела статьи можно смело опустить. :)
Идеальная верстка
Идеальная верстка это не только кроссбраузерный, отформатированный, элегантный, семантичный и максимально соответствующий стандартам код, это еще и читабельность, и сохранение структуры дизайна при различных условиях отображения в браузере. Что имеется ввиду? Верстальщик должен проверять верстку при следующих условиях:
- отключенные в браузере картинки
- отключенный JavaScript (если мы используем его, например, для исправления некоторых багов и/или добавлении недостающих фич IE)
- отключенные стили
- отображение при различных разрешениях и на небольших экранах
- при различном масштабе (собственно, о чем и пойдет речь)
При всех вышеперечисленных условиях (в любых их комбинациях) должна как минимум сохранятся читабельность страницы, а в идеале должна сохранятся и дизайнерская часть, то есть ничего не должно «ехать» (конечно, при условии что стили и картинки не отключены :). И если что-нибудь подкорректировать не составляет особого труда, то почему бы нашу верстку не приблизить еще на один шаг к идеалу?
Масштабирование
Процент пользователей, которые изменяют масштаб страницы в браузере не велик, это, в основном, те, у кого плохое зрение или монитор с большим разрешением. Но они существуют. Масштабирование в разных браузерах, различных версий отличается. Поговорим сейчас о седьмой версии IE, в которой появилось полное масштабирование страницы (как в Opera или Firefox 3), а не только текста (независимо в каких единицах измерения указаны размеры элементов). Но, как часто бывает с IE, не обошлось без багов. :)
Описание бага
Этими «многа букаф» в предыдущих разделах я попытался описать важность проблемы. :) Теперь суть. При масштабировании страницы в IE7 масштабируется все кроме фона элемента body, что не всегда красиво выглядит при сложных дизайнах. Приведу сильно упрощенный пример:
CSS:
* {padding: 0; margin: 0;}
body {
background: url(habr.gif) no-repeat;
}
HTML:
test text
Скриншот 1.
Решение 1
Решение «в лоб» это использование дополнительного родительского дива, в котором и будет указан фон вместо body. То есть див будет в отличии от фона body масштабироваться, ну и, конечно же, все будет кроссбраузерно. Собственно, я использовал такое решение в проблемной верстке.
CSS:
* {padding: 0; margin: 0;}
div {
background: url(habr.gif) no-repeat;
min-height: 108px;
}
HTML:
test text
Скриншот 2.
Решение 2
Но дополнительный див это лишний код и несемантичность. Так вот, мной недавно было найдено более элегантное решение. Мы просто указываем любой фон для элемента html. Ну и традиционно выносим все это дело в уловные комментарии и отдельный файл, чтобы стили видел только седьмой IE.
CSS:
* {padding: 0; margin: 0;}
body {
background: url(habr.gif) no-repeat;
}
CSS (IE7):
HTML:
test text
Результат будет тот же что и на втором скриншоте, но уже без дополнительного дива.
Послесловие
Обратите внимание на то, что использовано min-height для того чтобы не дать фону обрезаться при небольшой высоте. Если фон повторяющийся по вертикали и масштабирование по-прежнему необходимо, то придется воспользоваться height: 100% для html и min-height: 100%; для body. За идеальность решений не ручаюсь, но вроде особых минусов как таковых не обнаружил. Не исключено, что будет необходима доработка под каждый отдельный случай. Код в статьи умеренно упрощен для лучшего восприятия.