Начнем с того, что надо писать не под «ИЕ», а номера конкретных версий. Каждая версия ИЕ по своим особенностям и багам напоминает отдельный браузер, под который надо подкладывать свои, отдельные костыли. И что хуже, MS иногда выпускает исправления багов, и мы имеем кучу пользователей, с разными версиями, с разными наборами сервис-паков и обновлений. И что еще хуже, в некоторых браузерах есть режимы совместимости, например ИЕ8 может отобразить страницу в режиме совместимости с ИЕ7, и — кто бы ожидал — при этом с другим набором багов, нежели настоящий ИЕ7.
Вот плач тестировщика Яндекса по этому поводу: http://habrahabr.ru/post/201172/ (мне особенно нравится картинка из фильма про хоббитов — она очень хорошо выражает суть ситуации). Можете прочитать статью для осознания масштабов проблемы.
Потому начнем изучение противника с версий.
- IE12 (можно поставить на Win 7+) — не сталкивался с ним.
- IE11 (включен в Win 8.1, можно поставить на Win 7+) — более-менее нормальный браузер, поддерживающий современные стандарты HTML 5, CSS 3
- IE10 (включен в Win 8, ставится на Win 7+) — более-менее нормальный браузер, поддерживает HTML 5/CSS 3, кроме каких-то совсем новых вещей
- IE9 (ставится на Win Vista+) — первый из ИЕ, который начал поддерживать HTML5/CSS3. Увы, поддерживает мало что, например
text-shadow(тени у текста) нету. Ну хотя бы скругленные уголки есть — и на этом спасибо. Последний браузер, который поддерживает майкрософтовские фильтры (которыми можно имитировать недостающие тени и градиенты, например). Есть совсем немножечко багов, доставшихся видимо от предков. Но в общем, в сравнении с тем, что было раньше, неплохой браузер. - IE8 (включен в Win 7, ставится на Win XP+) — первый из ИЕ, который начал поддерживать HTML 4/CSS2.1 нормально без злостных багов (но немного мелких ошибок есть). Не поддерживает HTML 5/CSS 3 (круглые уголки, теги и все, что дальше), по нынешним меркам плох, но поверьте мне, после ИЕ7 и особенно 6 это был праздник — в кои-то веки верстка по стандартам отображается (почти) нормально! Сколько времени экономится! Часть вещей, вроде теней и градиентов, можно имитировать фильтрами.
- IE7 (включен в Vista), IE6 (включен в XP) — жуткие монстры из фильмов ужасов, которые обещают даже опытному верстальщику не одну бессонную ночь. На словах они
Львы Толстыеподдерживают HTML4/CSS2.1, но на деле там такое количество багов и «особенностей», что половину свойств использовать невозможно, все разваливается и съезжает. 95% современных сайтов в них не отображается в принципе. Если тебе приходится верстать под них, тозапасись успокаивающими препаратами или котомзабудь про CSS3, используй только CSS2.1, самую примитивную верстку, самые простые css-свойства, все размеры и расположение элементов задавай фиксированным, никакой резины, никаких процентов, никаких сложных конструкций с флоатами, никаких width: auto. Может быть, у тебя что-то и получится.
Вот большая табличка с версиями: http://ru.wikipedia.org/wiki/Internet_Explorer#.D0.92.D0.B5.D1.80.D1.81.D0.B8.D0.B8_.D0.B1.D1.80.D0.B0.D1.83.D0.B7.D0.B5.D1.80.D0.B0_Internet_Explorer
Для поддержки важно знать, сколько процентов пользователей использует ту или иную версию. Посмотреть статистику по России можно например тут (в других странах могут быть другие цифры): http://www.liveinternet.ru/stat/ru/browsers.html?id=41&id=4&id=25&id=32&id=20&per_page=100&ok=+OK+&report=browsers.html
Обрати внимание, «баги» относятся не только к багам в поддержке CSS, но и в JS. Твой JS код на старых версиях ИЕ тоже может не работать.
Браузер ИЕ глубоко интегрируется в систему, потому портабельных версий ИЕ нет. Откатить версию ИЕ на более старую можно только при установке ИЕ10 и выше, а например с ИЕ9 откатиться ниже уже нельзя. Возникает вопрос, как проверять сайт в нескольких версиях программы?
Правильный способ — виртуальные машины. Берем тот же Virtual Box, создаем в нем нужное число машин, ставим в них ОС и нужную версию ИЕ (который можно скачать с сайта MS). Я использовал где-то 512 Мб памяти на машину и «облегченные» версии винды. Также, майкрософт выпускает готовые образы с уже установленными ИЕ разных версий: https://www.modern.ie/ru-ru/virtualization-tools
Также, майкрософт предлагает (вроде бы бесплатно) получить доступ к IE в их облаке: https://remote.modern.ie/
Плюс в том, что мы видим то же, что и пользователь с ИЕ. Минус — затраты времени на установку/запуск виртуальных машин. Тем не менее, серьезные компании и профессионалы используют именно этот способ.
Другие варианты — программы вроде «multiple IE», которые включают в себя браузеры разных версий. С ними проще, но они обеспечивают недостаточную эмуляцию всех багов и особенностей ИЕ, и ты рискуешь либо пропустить баг, либо увидеть несуществующий.
В ИЕ начиная с версии 8 включены средства разработчика, вызваемые клавишей F12. Используй их, хотя они тоже могут глючить.
В начале твоего HTML-кода должен стоять доктайп ( http://htmlbook.ru/samlayout/rezhimy-brauzerov/doktaip ). Если ты не ставишь доктайп (или ставишь не в начале файла) — браузер думает, что перед ним древняя страница из 20-го века и переходит в quirks mode — режим совместимости с допотопным старьем. Для ИЕ это режим совместимости с ИЕ5 (ты читал, какой плохой ИЕ6? ну а тут будет ИЕ5).
Проще всего поставить HTML5 доктайп (он самый короткий):
<!DOCTYPE html>
Этого хватит, чтобы избежать перехода в quirks mode. Но этого недостаточно, чтобы избежать других ловушек вроде режимов «совместимости».
Версии браузера, начиная с ИЕ8 имеют режимы «совместимости» с более ранними версиями. Если ИЕ покажется, что страница рассчитана на более старый браузер — он переключится в этот режим (например из ИЕ9 в ИЕ7 — естественно, с отключением поддержки HTML5 и с включением багов из ИЕ7). Причем, разумеется, отображение страницы в режиме совместимости с ИЕ7 не совпадает с отображением в настоящем ИЕ7.
Поводов переключиться может быть много: в странице встречаются условные комментарии, сервер находится на твоем компьютере или в локальной сети (сюрприз, правда? одна и та же страница отображается по-разному в зависимости от того, на какой сервер выложена), сайт находится в волшебном списке майкрософт, пользователь нажал кнопочку переключения. Переключение в режим совместимости, естественно, сопровождается багами отображения, съехавшей версткой и другими радостями верстальщика.
Вот алгоритм выбора режима совместимости для ИЕ8: http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx (картинка в конце статьи). Как тебе?
К счастью, есть способ запретить такое поведение. Сделать это можно 2 способами:
-
В настройках веб-сервера или в приложении отдать заголовок
X-UA-Compatible: IE=edge. В php это можно сделать командойheader("X-UA-Compatible: IE=edge");, идущей до вывода самой страницы. Это надежный способ и работает в 99.9% случаев (кроме случая, когда пользователь нажал кнопку переключения режима). ВместоIE=edgeможно писать желаемую версию ИЕ, которую нужно эмулировать, например,IE=7, но эмулировать ИЕ умеет только более старые (и более глючные) версии. Зачем тебе такая радость? -
Добавить, как можно выше внутри
<head>, мета-тег:<meta http-equiv="X-UA-Compatible" content="IE=edge">
Это проще, так как не надо возиться с заголовками, но работает не всегда. Например,если ты использовал условный комментарий до мета-тега, то метатег проигнорируется (ИЕ переключится, верстка поедет).
Официальная документация:
- http://msdn.microsoft.com/ru-ru/library/cc288325(v=vs.85).aspx
- http://msdn.microsoft.com/en-us/library/ff406036(v=vs.85).aspx
Подвохи с метатегом: http://pepelsbey.net/2008/11/surprise-box/
Прежде чем говорить о багах, поговорим о том, как можно задать отдельные правила или html-код для отдельных версий ИЕ.
Особых багов нет. В ИЕ10 могут не поддерживаться какие-то совсем новые фичи CSS3/HTML5
Первая версия, поддерживающая (частично) HTML5/CSS3, а также Javascript ES5 (это Object.create(), Array.forEach, Function.bind и другие).
Не поддерживается часть CSS3-свойств: http://www.impressivewebs.com/css3-support-ie9/
Проверять поддержку того или иного набора свойств удобно на caniuse, например: http://caniuse.com/#search=text-shadow
Поддерживается только HTML4.01/CSS2.1. Это значит, нет круглых уголков, теней, растягивания фона и других прелестей CSS3. Это значит, что элементы из HTML5 вроде <nav> не отображаются и к ним не применяются стили (есть решение, смотри html5-shiv ниже).
Зато CSS2.1 поддерживается неплохо, с небольшим количеством багов.
Баги списком (англ.): http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Не поддерживаются нововведения Javascript ES5.
Баги:
- http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
- http://stylisticweb.com/design-tutorials/15-ie6-bugs-and-simple-solutions и гугл по словам «ie6 bugs»
Если кратко, то ИЕ6-7 работают по своим правилам, чем-то отдаленно напоминающие стандарты CSS2.1/HTML4. Если ты можешь избежать верстки под эти версии — избегай ее любой ценой.
«Постепенное ухудшение» — это когда мы при отстутствии той или иной фичи отказываемся от нее. Например, если старый браузер не поддерживает скругление уголков, то выводим нескругленные. Если браузер не поддерживает отправку файлов аяксом с полоской прогресса, отправляем обычной формой с перезагрузкой страницы. При таком подходе пользователь все равно может пользоваться сайтом, пусть и с меньшим комфортом, и этот подход не требует много труда. Увы, заказчику иногда может не понравится отсутсвие круглых уголков, и тебе придется ставить скрипты-полифиллы, утяжеляющие страницу и создающие место для новых багов.
В ИЕ до 9 версии включительно можно использовать условные комментарии, чтобы вставить кусок HTML-кода только для определенных версий ИЕ (или наоборот скрыть от них): http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii
С их помощью, например, можно подключить отдельный css-файл только для ИЕ и писать в него исправления верстки.
С помощью специальных конструкций можно сделать css-правила применимыми (или неприменимыми) для отдельных версий браузеров. Подробнее:
- http://habrahabr.ru/post/125396/
- http://www.web-utils.net/css-hack/browser-list-ie-firefox-opera-safari
В ИЕ (до версии 9) есть фильтры, с помощью которых можно частично имитировать полупрозрачность (opacity), тени (box-shadow, text-shadow) и градиенты из CSS3. Учти, что тут надо тщательно все тестировать, так как фильтры могут приводить к искажениям формы букв, картинок, «грязному» тексту, искажениям вида страницы и тормозам.
Фильтры добавляются через css-свойства filter и -ms-filter (в ИЕ9). Это не те фильтры, что вводятся в новых стандартах CSS3, не перепутай (хотя свойства называются так же).
- http://www.artlebedev.ru/tools/technogrette/html/filters-in-ie/
- http://habrahabr.ru/post/50996/
- http://habrahabr.ru/post/94799/
Для борьбы с проблемами ИЕ есть полифиллы и скрипты. Полифиллы добавляют поддержку фич из Javascript ES5.
Прежде чем их использовать, стоит учесть, что тут не все так просто. Те скрипты, которые эмулируют в старых ИЕ поддержку новых CSS3 свойств могут вносить серьезные ухудшения юзабилити: страница может начать тормозить, дергаться при прокрутке, дольше загружаться, могут съехать верстка. Потому стоит тщательно тестировать такие скрипты и выбирать: что важнее, круглые уголки или скорость работы и удобство использования страницы. Мне, например, скорость важнее, но заказчик может иметь другое мнение.
-
html5-shiv: https://github.com/aFarkas/html5shiv — позволяет ИЕ8 (и ниже) использовать HTML5-теги вроде
<header>и применять к ним CSS-стили. Все, больше он ничего не делает. Поддержка CSS3 и круглых уголков от него не появятся. Принцип его работы (англ.): http://www.paulirish.com/2011/the-history-of-the-html5-shiv/ От него негативных последствий нет. -
PIE.htc — обещает поддержку в IE8 и даже ниже CSS3-свойств, но возможно ценой багов и сильных тормозов. Надо тщательно тестировать. Также помни, что в IE7 даже CSS2 толком не поддерживается.
(другие скрипты и полифиллы ищи в гугле)