Ошибки IE8

01.09.2011

Влад Мержевич

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

Шрифты в формате TTF

IE8 не поддерживает загрузку шрифтов в формате TTF для @font-face (пример 4.11). Это правило применяется для загрузки специфичного шрифта на компьютер пользователя для последующего отображения текста этим шрифтом.

Пример 4.11. @font-face

XHTML 1.0CSS 2.1IE 7IE 8IE 9+CrOpSaFx

<!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 стиля никогда не понадобится, но в некоторых системах управления сайтом свой стилевой файл включает каждый модуль. В итоге некоторые страницы могут отображаться некорректно (пример 4.12).

Пример 4.12. 32 стиля

XHTML 1.0CSS 2.1IE 7IE 8IE 9+CrOpSaFx

<!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> сдвигается в момент нажатия на кнопку (пример 4.13).

Пример 4.13. Кнопка с фоновым рисунком

XHTML 1.0CSS 2.1IE 7IE 8IE 9+CrOpSaFx

<!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 нет пробела (пример 4.14).

Пример 4.14. Не показывается фон

XHTML 1.0CSS 2.1IE 7IE 8IE 9+CrOpSaFx

<!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 приводит к появлению ошибки — вместо одного заглавными становятся два символа (пример 4.15).

Пример 4.15. Заглавные символы

XHTML 1.0CSS 2.1IE 7IE 8IE 9+CrOpSaFx

<!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 показан на рис. 4.17.

Рис. 4.17. Текст с ошибкой

Полезные ссылки

Подробный список найденных ошибок IE8 вы можете найти по следующим ссылкам.

http://jhop.me/ie8-bugs — 68 ошибок с CSS (англ.)
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/ — 64 разных ошибки (англ.)
http://haslayout.net/css/ (англ.)

IE8