Отображение в IE
Конечно, Internet Explorer содержит большое количество ошибок в разных версиях, но с помощью условных комментариев с ними можно бороться, добиваясь их устранения. Но вот чего нельзя ничем исправить, так это то, что IE безнадёжно устарел. Пока остальные браузеры включают всё больше свойств CSS3, поддерживают различные новомодные технологии, IE топчется на месте. Выход IE9 не решит проблему, предыдущие версии от этого в одночасье не испарятся. В такой ситуации наилучшим решением будет изящная деградация (graceful degradation) — принцип сохранения работоспособности при потере части функциональности.
Давайте разберём этот приём на небольшом примере, в котором выводится текст в блоке и кнопка. У блока и кнопки заданы скруглённые уголки, к блоку также добавляется небольшая тень. Пока браузеры для CSS3 применяют преимущественно специфические свойства со своими префиксами:
Firefox — свойства, начинающиеся с -moz-;
Safari и Chrome — свойства, начинающиеся с -webkit-;
Opera — свойства, начинающиеся с -o-.
Разные версии этих браузеров могут понимать некоторые свойства как с префиксом, так и без него, поэтому для универсальности добавляют одновременно несколько свойств сразу. Так, для создания скруглённых уголков нам потребуется следующий стиль.
-moz-border-radius: 10px; /* Для Firefox */ -webkit-border-radius: 10px; /* Для Safari и Chrome */ border-radius: 10px; /* Для Opera и IE9 */
Хотя применение этих свойств приведёт к невалидному коду CSS, в данном случае важнее работа в браузерах Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, а также в их старших версиях. В
примере 5.11 показано использование свойств CSS3 для создания тени и скруглённых уголков.
Пример 5.11. Блок с тенью XHTML 1.0 CSS 2.1 CSS 3 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Блок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
.block {
background: #c5fddb; border: 1px solid #666; padding: 1px 10px;
/* Скругленные уголки */
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
/* Тень вокруг блока */
-moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666;
}box-shadow: 0 0 5px #666;
input[type="submit"] {
background: #f0f0f0; border: 1px solid #666; font-size: 1.2em; padding: 0 40px;
/* Скругленные уголки */
-moz-border-radius: 40px; -webkit-border-radius: 40px;
}border-radius: 40px;
</style>
</head>
<body>
<div class="block">
<p>Вам необходимо пройти 20 вопросов, которые в случайном порядке выбираются из базы данных. Для прохождения теста достаточно правильно ответить не менее чем на 75% предложенных вопросов
(15 и более вопросов).</p>
<p><input type="submit" value="Начать тест" /></p>
</div>
</body>
</html>
Результат примера продемонстрирован на рис. 5.16.
Рис. 5.16. Вид блока в Safari
Тот же пример в браузере IE8 и ниже представлен на рис. 5.17.
Рис. 5.17. Вид блока в IE8
Хотя вид элементов различается в деталях, сохраняется работоспособность страницы в целом. На кнопку можно нажать, текст остался прежним, включая его цвет и фон, ошибок отображения нет. Фактически, разница только в мелочах, которые выполняют декоративные, а не прикладные функции. Все принципы изящной деградации выполнены.
Что даёт на практике этот подход?
Позволяет активно использовать декоративные свойства CSS3 без оглядки на браузер.
Мотивирует применять различные эффекты CSS3.
Существенно облегчает жизнь разработчика, так как ему теперь не надо искать решения для устаревших браузеров.
Ускоряет производительность работы.
Разумеется, изящная деградация применима не всегда. Если в требованиях к вёрстке указана поддержка старых версий, то придётся искать альтернативные решения, например, для скруглённых уголков использовать изображения. Но в большинстве своём требования к вёрстке выставляют без учёта общей ситуации. И если сравнить все преимущества изящной деградации с недостатком, который проявляется только в том, что устаревшие браузеры, в частности IE8 отображают страницу недостаточно «красиво», то симпатии окажутся на стороне прогресса.
Ошибки IE8
IE8 наиболее стабильная версия этого браузера по сравнению с предыдущими версиями. Но он морально устарел и не поддерживает множество стилевых свойств CSS3 как у конкурентов. Перечисленные ниже некоторые ошибки не все поддаются «лечению», но даже в этом случае полезно их знать, чтобы понимать, чего ожидать от браузера.
Шрифты в формате TTF
IE8 не поддерживает загрузку шрифтов в формате TTF для @font-face (пример 5.12). Это правило применяется для загрузки специфичного шрифта на компьютер пользователя для последующего отображения текста этим шрифтом.
Пример 5.12. @font-face
XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>@font-face</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
@font-face {
font-family: Pompadur; /* Имя шрифта */
}src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
p {
}font-family: Pompadur;
</style>
</head>
<body>
<p>Протяженность варьирует дорийский микрохроматический интервал,
но если бы песен было раз в пять меньше, было бы лучше для всех.</p>
</body>
</html>
В IE8 и младше текст будет отображаться шрифтом, заданным в браузере по умолчанию.
Ограничение на число стилей
В IE6–8 существует ограничение в 31 стиль, включаемый на страницу через <style>, <link> или @import. Тридцать второй стиль и последующие будут игнорироваться. Кажется, что 32 стиля никогда не понадобится, но в некоторых системах управления сайтом свой стилевой файл включает каждый модуль. В итоге некоторые страницы могут отображаться некорректно (пример 5.13).
Пример 5.13. 32 стиля XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>32 стиля</title>
<style type="text/css"></style> <!--1--> <style type="text/css"></style> <!--2-->
...
<style type="text/css"></style> <!--30--> <style type="text/css"></style> <!--31-->
<style type="text/css">body { background: red; }</style> <!--32-->
</head>
<body> <p>...</p>
</body>
</html>
В данном примере цвет фона на веб-странице применяться не будет.
Решение
Ограничьте количество стилей.
favicon.ico
IE6–8 в обязательном порядке запрашивает файл favicon.ico, находящийся в корне сайта. Если его там нет, в логи ошибок сервера пишется «404 файл не найден».
favicon.ico — иконка сайта, она появляется возле адреса сайта и в закладках браузера.
IE6–8 не поддерживает иконку в формате PNG или любом другом графическом формате, только ICO.
Решение
Создайте иконку в формате ICO и скопируйте файл с именем favicon.ico в корень сайта.
Сдвиг фона на кнопках
Фон, установленный для кнопок, созданных с помощью тегов <button> или <input> сдвигается в момент нажатия на кнопку (пример 5.14).
Пример 5.14. Кнопка с фоновым рисунком |
|
|
|
|
|
|
|
|
|
|
||
XHTML 1.0 |
|
CSS 2.1 |
|
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
|
|
|
|||||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
|
|
|||||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
|
|
|
|
|
|
|
|
|
|
|
<head> |
|
|
|
|
|
|
|
|
|
/> |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" |
|
|
||||||||||
<title>Кнопка с фоном</title> |
|
|
|
|
|
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
|
|
|
|
|
|
|
|
|
|
.bg { background: url(images/umbrella.gif) no-repeat; |
|
|
|
|||||||||
}height: 35px; padding-left: 30px;
</style>
</head>
<body>
<p><button>Обычная кнопка</button></p>
<p><button class="bg">Кнопка с фоном</button></p>
</body>
</html>
Не отображается фон, заданный через background
В некоторых случаях фоновый рисунок, который устанавливается с помощью свойства background, не выводится в IE6–8. Это связано с тем, что в значении между url и другими параметрами вроде no-repeat нет пробела (пример 5.15).
Пример 5.15. Не показывается фон XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фон</title>
<style type="text/css">
body { background: url(images/ie.png)no-repeat; }
</style>
</head>
<body> <p>...</p>
</body>
</html>
Обратите внимание, что CSS валидный, несмотря на отсутствие пробела, поэтому ошибку отследить
труднее.
Решение
Поставьте пробел после url().
Применение float к :first-letter
Сочетание свойств float, text-transform со значением capitalize и псевдокласса :first-letter работает некорректно. Значение capitalize превращает первый символ каждого слова в предложении в заглавный. Остальные символы свой вид не меняют. Добавление float к псевдоклассу :first-letter приводит к появлению ошибки — вместо одного заглавными становятся два символа (пример 5.16).
Пример 5.16. Заглавные символы |
|
|
|
|
|
|
|
|
|
|
|
XHTML 1.0 |
|
CSS 2.1 |
|
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 |
Strict//EN" |
||||||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Заглавная буква</title>
<style type="text/css">
#test { text-transform: capitalize; font-size: 2em; } #test:first-letter { float: left; }
</style>
</head>
<body>
<p id="test">Текст</p>
</body>
</html>
Вид текста в IE8 показан на рис. 5.18.
Рис. 5.18. Текст с ошибкой
Полезные ссылки
Подробный список найденных ошибок IE8 вы можете найти по следующим ссылкам.
http://jhop.me/ie8-bugs — 68 ошибок с CSS (англ.)
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/ — 64 разных ошибки (англ.) 
http://haslayout.net/css/ (англ.)