Ошибки IE7



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

Браузерный движок IE7 под названием Trident претерпел существенные изменения по сравнению с предыдущей версией Internet Explorer — исправлено множество ошибок, улучшилась поддержка свойств и селекторов CSS 2.1. Но в его основе осталось то же внутреннее свойство hasLayout и все ошибки с ним связанные. К старым ошибкам добавились ещё и новые.

Стили не работающие в IE7

Когда IE7 только вышел, казалось, что без многих стилевых свойств, псевдоклассов и псевдоэлементов легко можно обойтись. Но к хорошему, как говорится, быстро привыкаешь, и теперь без многих свойств прямо как без рук.

Псевдоэлементы :before и :after

Используются для вывода определённого контента до и после элемента. В примере 4.16 показано создание пунктирной горизонтальной линии с текстом «Линия отреза».

Пример 4.16. Линия отреза

XHTML 1.0CSS 2.1IE 7IE 8+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">
   HR {
    text-align: center; /* Выравниваем текст по центру */
    border: none; /* Убираем исходную границу */
    border-top: 1px dashed #000; /* Параметры линии  */
    height: 18px; /* Высота блока */
    background: url(images/scissors.png) no-repeat 10px -18px; 
                /* Параметры фона */
   }
   HR:after { 
    content: "Линия отреза"; 
    font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */
    font-size: 12px; /* Размер шрифта */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
  </style>
 </head>
 <body>
  <p>Текст до</p>
  <hr />
  <p>Текст после</p>
 </body>
</html>

Вид страницы в IE7 показан на рис. 4.18. Кроме того, что не выводится текст под линией, у тега <hr> отображается рамка, несмотря на явный запрет на неё.

Вид линии в IE7

Рис. 4.18. Вид линии в IE7

Свойство content

Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами :after и :before.

Свойство caption-side

Определяет положение заголовка таблицы, который задаётся с помощью тега <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы (пример 4.17).

Пример 4.17. Заголовок таблицы

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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>caption-side</title>
  <style type="text/css">
   table {
    width: 350px; /* Ширина таблицы */ 
    border-collapse: collapse; /* Убираем двойную рамку между ячейками */ 
   }
   td {
    border: 1px solid green; /* Параметры границы */ 
    padding: 5px; /* Поля в ячейке */ 
   }
   caption { 
    caption-side: bottom; /* Заголовок под таблицей */ 
   }
  </style>
 </head>
 <body>
  <table>
   <caption>Расклад карт</caption>
   <tr>
    <td>&nbsp;</td><td>&spades;</td><td>&clubs;</td>
    <td>&hearts;</td><td>&diams;</td>
   </tr>
   <tr>
    <td>Чебурашка</td><td>6</td><td>3</td><td>1</td><td>3</td>
   </tr>
   <tr>
    <td>Крокодил Гена</td><td>1</td><td>5</td><td>5</td><td>2</td>
   </tr>
   <tr>
    <td>Шапокляк</td><td>3</td><td>4</td><td>6</td><td>0</td>
   </tr>
   <tr>
    <td>Крыса Лариса </td><td>3</td><td>1</td><td>1</td><td>8</td>
   </tr>
  </table>
 </body>
</html>

Свойства counter-increment и counter-reset

Стилевое свойство counter-increment предназначено для увеличения значения счетчика приращений, который задаётся свойством counter-reset. Такой счетчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили, а также делать автоматическую нумерацию заголовков, изображений, таблиц и др. (пример 4.18).

Пример 4.18. Нумерация заголовков

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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>counter-increment</title>
  <style type="text/css">
   body {
    counter-reset: heading; /* Инициируем счетчик */
   }
   h2:before {
    counter-increment: heading; /* Указываем идентификатор счетчика */
    content: "Глава " counter(heading) ". "; 
              /* Выводим текст перед содержимым тега <h2> */
   }
  </style>
 </head>
 <body>
  <h2>Теория ловли льва в пустыне</h2>
  <h2>Методы инверсной кинематики</h2>
  <h2>Ловля льва численными методами</h2>
 </body>
</html>

Из-за того, что IE7 не понимает используемые в стиле свойства, заголовки будут выведены как обычно, без текста впереди.

Свойство empty-cells

Задаёт отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

Псевдокласс :focus

Определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор. В примере 4.19 вокруг текстового поля с фокусом добавляется оранжевая рамка.

Пример 4.19. Фокус в поле

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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>:focus</title>
  <style type="text/css">
   input:focus { border: 1px solid orange; }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="text" /></p>
  </form>
 </body>
</html>

Свойство outline

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. В IE7 также не поддерживаются и производные свойства outline-color, outline-style и outline-width.

Свойство quotes

Устанавливает тип кавычек, который применяется в тексте документа (см. пример 1.58).

Ошибки

Главная неприятность IE7 это большое количество ошибок, связанных с некорректной интерпретацией стилевых свойств.

@import

Не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается (пример 4.20).

Пример 4.20. Ошибка с @import

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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>@import</title>
  <style type="text/css">
   @import "style/main.css" screen;
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Содержимое файла main.css.

body {
 background: #666;
 color: #ff0;
}

Границы

Линия, у которой стиль задан как dotted, превращается в dashed для толщины 2px и более (пример 4.21).

Пример 4.21. Ошибка с dotted

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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">
   P {
    border: 1px dotted #000;
    border-top: 2px dotted #000;
   }
  </style>
 </head>
 <body>
   <p>&nbsp;</p>
 </body>
</html>

На рис. 4.19 линия сверху отличается по стилю от остальных линий, хотя меняется лишь толщина.

Некорректная линия сверху

Рис. 4.19. Некорректная линия сверху

button

Любое значение в стиле button[value="x"] приводит к краху браузера!

button[value="1"] { color: red; }

display

В IE7 не поддерживаются следующие значения свойства display: inline-table, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group.

Для тега <li> значение block понимается как list-item, а значение inline-block работает только для строчных элементов.

overflow и position: fixed

Сочетание свойства overflow со значением auto или scroll с positionfixed приводит к серьёзной нагрузке на процессор и в итоге к нарушению работы браузера и операционной системы!

:first-letter и letter-spacing

Cвойство letter-spacing, когда оно применяется к псевдоэлементу :first-letter, игнорируется.

Свойство line-height

Неправильно вычисляется высота строк для изображений и элементов форм.

list-style-image и float

Для списка не отображаются картинки-маркеры, если задано свойство list-style-image одновременно с float (пример 4.22).

Пример 4.22. Нет картинок

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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>list-style-image</title>
  <style type="text/css">
   LI {
    list-style-image: url('images/book.gif'); /* Картинка */
    float: left; /* Выстраиваем список по горизонтали */
    padding-left: 10px; /* Поле слева */
    margin-right: 30px; /* Отступ справа */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Земля</li><li>Огонь</li><li>Вода</li><li>Воздух</li>
  </ul>
 </body>
</html>

Ошибка с выравниванием

Свойство text-align выравнивает не только текст, но и блоки. В примере 4.23 по правому краю выравнивается слой t2 и текст внутри него.

Пример 4.23. Некорректное выравнивание

XHTML 1.0CSS 2.1IE 6IE 7IE 8CrOpSaFx

<!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>text-align</title>
  <style type="text/css">
   body { text-align: right; /* По правому краю */}
   .t1 {
    background: #fc0; padding: 10px;
   }
   .t2 { 
    width: 60%; border: 1px solid #000; background: #fff; 
    padding: 5px; 
   }
  </style>
 </head>
 <body>
  <div class="t1">
   <div class="t2">Текст, выровненный по правому краю</div>
  </div>
 </body>
</html>

Вид текста в IE7 показан на рис. 4.20.

Выравнивание по правому краю

Рис. 4.20. Выравнивание по правому краю

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.