Коллекция багов и решений для IE

IE — как много в этом слове… Я люблю IE, все любят IE, это статья полностью посвящена ему, а точнее решениям часто встречаемых проблем этого браузера. Ошибки шестой версии добавил для истории.

Для тестирования проектов в IE7-9 можно использовать 10-ую версию в режиме эмуляции — так удастся выловить большинство ошибок. Однако если нужно тестировать в IE6, придется использовать виртуальную машину с Windows XP, в которой установлен данный браузер. Из бесплатных вариантов могу порекомендовать виртуалку VirtualBox. В качестве альтернативы, но несомненно менее лучший вариант, можно рассмотреть IE Tester.

Содержание статьи

  1. Тестирование верстки
  2. IE < 10
  3. IE 6-8
  4. IE 7
  5. IE 6

Последнее обновление статьи — .

Тестирование верстки

Сами понимаете, что браузер от Microsoft отдельный случай — в нем приходится тестировать проекты, начиная с 7-ой версии по 10-ую, и иногда, как я рад вписать это слово, с 6-ой. Для этого удобно использовать последнюю версию браузера в режиме эмуляции, выбрав необходимую версию. Зайдем в средства разработчика (прим. — F12) и выберем режим браузера:

Режимы браузера IE
Режимы браузера IE

Этого хватит для исправления 95% процентов багов, например в режиме эмуляции вы не увидите ошибок в JS-коде, свойственных оригинальным браузерам. Для остальных 5% случаев или в случае тестирования в 6-ой версии придется воспользоваться другими вариантами:

  • использование виртуальной машины с Windows XP и установленным оригинальным Internet Explorer 6
  • использование IETester. Программа позволяет одновременно проверять свой проект в IE6-10. Однако иногда в ее работе возможны ошибки — результат в окне может выглядеть криво, а на деле все нормально. Подойдет как альтернативный вариант
  • portable-версии браузеров, отличная подборка здесь, однако недостаток тот же, что и в IETester’е — бывает неверным отображение верстки, хотя в оригинале все может работать корректно
  • существуют онлайн-сервисы, которые позволяют проверить проект в целой кучи браузеров посредством снятия скриншота. Один из таких сервисов browsershots.org

Стоит отметить, что тестировать верстку в оригинальном браузере лучше всего. И не забываем, что правила для IE подключаем через отдельный файл.

IE < 10

classList.js — эмуляция classList API

Все современные браузеры представляют удобный интерфейс для работы с классами через JS — classList API. classList поможет легко удалять, добавлять и переключать (toggle) классы у элементов, узнавать количество классов элемента и т.д. Однако в IE поддержка classList API добавлена только в 10-ой версии. Для более старых версий (а именно 8 и 9) через условные комментарии можно подключать полифил Эли Грея classList.js, который эмулирует поддержку. Но — внимание! — в IE7 не работает и это решение. Для него используем самописные или аналогичные функции из фреймворков, основанные на стандартном className.

IE 6-8

Включение HTML5 тегов — html5shiv

IE < 9 не понимает новые блочные теги HTML5, такие как <header>, <aside>, <footer> и другие, и показывает их так, будто им назначен display: inline. Решить проблему обычным присвоением display: block для новых элементов не получится, хотя это необходимо для других браузеров, не поддерживающих новые теги (кстати входит в reset.css и normalize.css). Чтобы исправить это небольшое недоразумение, через Сonditional comments перед новыми тегами подключим небольшой скрипт html5shiv Реми Шарпа.

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Практически все разработчики включают поддержку HTML5 тегов этим способом, так что есть большая вероятность того, что при посещении вашего ресурса скрипт уже будет в кэше браузера.

Существуют и альтернативные варианты подключения html5shiv — например через библиотеку Modernizr.

Поддержка свойств CSS3 border-radius, box-shadow и linear-gradient

Как известно Internet Explorer ниже 9-ой версии не поддерживает новые CSS3 свойства, которые хочется использовать уже здесь и сейчас. Конечно самый лучший принцип — придерживаться правила graceful degradation для старых браузеров, т.е. оставлять доступным содержание сайта при его менее приглядном виде. Но все-таки некоторые свойства можно имитировать. Для этого нам пригодится скрипт PIE (Progressive Internet Explorer), с помощью которого мы можем имитировать border-radius, box-shadow и linear-gradient через VML-объект.

Из архива с плагином необходимо вытащить файл PIE.htc, залить его в проект и в стилях для Internet Explorer свойством behavior указать путь к этому файлу.

elem {
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  behavior: url('path/PIE.htc');
}

Однако не все так здорово, как кажется — у PIE есть два серьезных недостатка: первый — при множестве PIE-подключений на странице он значительно тормозит браузер, второй — при масштабировании окна браузера могут наблюдаться артефакты изображений. Поэтому каждый должен решить для себя — использовать его или нет, и соответственно дальше делать скругления, градиенты и тени для IE картинками, или следовать парадигме graceful degradation.

Поддержка media queries

Internet Explorer ниже 9-ой версии не поддерживает media queries, чтобы исправить это, подключим скрипт от Google:

<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Canvas для IE — explorercanvas

Вместе с приходом HTML5 пришла возможность рисовать прямо в браузере, делается это с помощью нового элемента <canvas>. Разумеется старые браузеры IE не поддерживают этот элемент, но можно воспользоваться расширением explorercanvas от Google, который позволяет эмулировать некоторые основные возможности холста через VML. Подключение скрипта через Conditional comments:

<!--[if IE]>
  <script src="path/excanvas.js"></script>
<![endif]-->

Фон на всю ширину окна браузера

В CSS3 появилось чудесное свойство background-size для того чтобы можно было растянуть фон на всю ширину окна:

body {
  background: url(path/background.png);
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%; /* ширина и высота 100% */
}

Для старых браузеров IE это свойство не работает, применим другой прием — вставим изображение тегом <img> перед закрывающим </body> и назначим стили:

html, body {
  height: 100%;
}
.bg-ie {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

Семантика документа конечно страдает, зато работает.

Правило 31 стиля

Забавный баг — при установке стилей тегами <link> или <style> 32-ой стиль работать не будет:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Counter</title>
<link rel="stylesheet" href="path/style-1.css"> <!-- 1-ый стиль -->
<link rel="stylesheet" href="path/style-2.css"> <!-- 2-ый стиль -->
...
<link rel="stylesheet" href="path/style-32.css"> <!-- 32-ой стиль - работать не будет -->
</head>
<body>
  ...
</body>
</html>

Актуально для версий 6-8.

Прозрачность opacity

Как известно, во всех современных браузерах прозрачность слоя задается свойством opacity:

elem {
  opacity: .5 // получили наполовину прозрачный элемент
}

В Internet Explorer до 8-ой версии включительно данное свойство не сработает. Чтобы получить кроссбраузерную прозрачность, следует воспользоваться фильтрами:

elem {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; // фильтр для IE8 
  filter: alpha(opacity=50); // фильтр для IE6-7
  opacity: .5 // для остальных браузеров
}

Прозрачность rgba()

С помощью CSS3 функции rgba() мы можем задавать элементам цвета с альфапрозрачностью (от 0 до 1):

elem {
  background: rgba(0, 0, 0, .5); /* черный цвет, прозрачность 50% */
}

В IE < 9 это замечательное свойство не работает, и в качестве альтернативы воспользуемся таким кодом:

elem {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
  zoom: 1;
}

Отличный генератор цветов и более подробное описание по ссылке — kimili.com

IE7

inline-block

К сожалению IE до 7-ой версии включительно понимают свойство display: inline-block только для строчных элементов, такие как <img>, <span> и пр. К блочным элементам необходимо применить такой небольшой хак:

elem {
  display: inline;
  zoom: 1;
}

После этого свойство становится кроссбраузерным. Данное правило естественно выносим в отдельные стили для IE.

IE6

Знаю, что многие уже давно оставили в покое IE6 и больше под него не верстают. Но все же давайте сохраним все его баги и решения для них, ведь я так его люблю.

hasLayout

Очень часто проблемы с отображением в шестом Эксплорере заключаются в отсутствии у элементов свойства layout. Напрямую задать это свойство нельзя, но есть ряд свойств, при которых layout становится активным: это указание float: left/right, height (например, height: 1%) или width, position: relative, невалидное zoom: 1. Очень часто решают проблемы отображения парное использование position: relative и zoom: 1. Наличие layout’a позволяет избавиться от странных багов с отображением плавающих блоков, отступами между элементами и т.д.

Удвоение отступов у плавающих блоков

IE6 удваивает отступы слева и справа у блочных элементов, которым задан float. Пример:

elem {
  float: left;
  margin: 0 10px; /* отступ слева и справа 10px во всех браузерах, в IE6 - 20px */
}

Первое что приходит в голову — в стилях для IE6 назначать отступы вдвое меньше.

elem {
  float: left;
  margin: 0 5px;
}

Однако это не очень гибко — что если отступы нужно будет изменить? Менять значения сразу в двух местах довольно неудобно, потому такой метод отправляем в топку.

Второй способ намного гибче — задать элементу display: inline. Благодаря float он все равно останется блочным, а выигрыш от этого — с отступами теперь все в порядке.

elem {
  display: inline;
  float: left;
  margin: 0 10px;
}

Третье решение заключается в том, чтобы использовать padding вместо margin.

IE6 и полупрозрачность PNG-24

IE6 некорректно поддерживает полупрозрачность PNG-24. На мой взгляд самое удобное решение здесь — подключить скрипт DD_belatedPNG Дрю Диллера в документ через Сonditional comments.

<!--[if IE 6]>
  <script src="js/DD_belatedPNG.js"></script>
  <script>DD_belatedPNG.fix('IMG, #id, .class');</script> // вызываем метод fix объекта DD_belatedPNG и перечисляем элементы с PNG-24
<![endif]-->

Удобно, что в аргументах метода можно указывать теги, идентификаторы и классы.

hover для элементов

К сожалению, 6-ой Explorer поддерживает псевдокласс :hover только для ссылок, на все остальные элементы это событие не сработает. Поэтому приходится прибегать к помощи JavaScript, например при наведении на элемент присваивать какой-нибудь класс и через него задавать необходимые правила:

$(elem).hover(function() {
  $(this).addClass('hover'); // присваиваем класс при наведении курсора
}, function() {
  $(this).removeClass('hover'); // удаляем класс при уходе курсора
});

:first-child для IE6

IE6 не поддерживает псевдокласс :first-child. Первое решение самое простое — специально для шестого навешивать на нужные элементы классы и через них задавать CSS-правила.

elem:first-child {
  /* для всех браузеров */
}
elem.first {
  /* для сами знаете кого */
}

Второй способ заключается в использовании JavaScript, в данном случае jQuery.

  $(elem:first).css('свойство', 'значение');

Недостаток метода в том, что при отключенном в браузере JS пример не будет работать, да и использовать скрипты для навешивания стилей далеко не всегда правильно.

Отступы в пустых блоках

6-ой Explorer задает высоту пустого блока равной величине текущего шрифта, например если в документе размер шрифта 14 пикселей, то и высота пустого блока будет такая же. Лечится обнулением размера шрифта:

elem {
  font-size: 0;
}

Минимальная и максимальная ширина

6-ой Explorer не понимает свойства min-width и max-width, решение — использовать JS:

// attachEvent сработает только в IE
window.attachEvent('onload', minWidthForIE); // повесили функцию minWidthForIE на события загрузки документа и ресайза окна
window.attachEvent('onresize', minWidthForIE);
function minWidthForIE(){
  document.getElementById('wrapper').style.width = ((document.documentElement.clientWidth || document.body.clientWidth) < 1000) ? '1000px' : ((document.body.clientWidth > 1366) ? '1366px' : '100%');
};

В скрипте с помощью функции задаем на блок минимальную ширину 1000px и максимальную 1366px, а саму функцию навешиваем на событие загрузки документа и ресайз окна браузера.

Минимальная высота

IE6 не поддерживает min-height, минимальная высота задается свойством height элемента:

elem {
  height: 500px; /* это и будет минимальная высота для шестого */
}

Отрицательные поля

Internet Explorer не любит отрицательные поля, которые часто оказываются полезны и активно используются верстальщиками. Чтобы помочь ему в правильном отображении элемента с отрицательными полями, добавим фикс position: relative и zoom: 1:

elem {
  margin: 0 0 0 -10px;
  position: relative;
  zoom: 1;
}

Лишние отступы у изображений

Лечится добавлением для изображений display: block, vertical-align: top/bottom или float: left/right.

position: fixed

Великий браузер не поддерживает position: fixed, приходится применять экспрешены для эмуляции:

elem {
  /* первый метод */
  top: expression(
    eval(document.body.scrollTop) + "px"
  );	
  /* второй */			
  top: expression(
    document.getElementsByTagName("body")[0].scrollTop + "px"
  );
  /* третий */
  top: expression(
    parseInt(document.body.scrollTop, 10) + "px"
  );
}	

Подсмотрено у всем известной студии, применяется один любой на выбор.

Рейтинг статьи

Похожие статьи

Комментарии читателей

  1. Александр:

    Добрый день.
    Подскажите, пожалуйста, в чём может быть причина:
    В IE 8 поиск на странице с использованием jQuery работает нормально, а в IE 11 версии при поиске русские символы удаляются в тексте, а при поиске латинских символов всё нормально.
    Спасибо!

  2. Здравствуйте, Вадим. Спасибо за статью, все в кучку, не надо шарить по записям своим, которые теряются в нужный момент. Я как делаю круглые углы с PIЕ, так обнаруживаю, что не помню, как это надо сделать, а теперь в закладочки — и все на месте. Очень рада за вас, что ваш сайт бесплатно взяли в каталог яндекса, хоть рядом постоять с таким человеком. Удач вам и творческих успехов!

Добавить комментарий