Отладка сайтов в старых IE
Если вы всерьез занимались версткой какого-нибудь сайта, вам наверняка доводилось сталкиваться с несовместимостью сайта с некоторыми браузерами. Особенно сильно этим грешат браузеры от Microsoft — чем ниже версия Internet Explorer'a, тем больше проблем возникает.
Пародоксально, что до сих пор так много людей использует Internet Explorer 6, который вышел в 2001 году.
Вы можете поступить как Google и отказаться от поддержки старых браузеров, но это не всегда возможно и врят ли устроит ваших корпоративных клиентов. Им ведь все равно, сколько сил вы тратите на обеспечение совместимости с одним браузером — они платят деньги.
Но если вы все же решились занятся отладкой сайта на старых версиях IE, вам понадобятся подходящие инструменты, которые не так просто найти на современных компьютерах.Браузер
Сложнее всего с самим браузером. Это не Опера, разные версии которой можно установить в разные директории и использовать одновременно.
В интернете есть несколько решений, но я не нахожу их приемлимыми:
- готовые образы виртуальных машин с нужными браузерами от Microsoft (ограниченный срок работы, большой размер для загрузки)
- Multiple IE — программный пакет с несколькими версиями браузера (не всегда запускается, нет IE 7)
- плагин IE Tab для Firefox (очень ограниченная функциональность, практически нет отладки)
- режимы совместимости в IE 8 (помогает совсем немного)
Лично я установил VMware, создал две виртуальных машины с Windows XP и разными версиями Internet Explorer'a на них. Это оказалось наиболее практичным вариантом для меня.
Но можно поступить и проще. Я недавно узнал о существовании прекрасной программы — IE Tester.
Программа позволяет в одном окне в разных вкладках запускать различные версии Эксплорера (от 5.5 до 8). На моем Windows 7 все работало без каких-либо проблем.
Я проверял, насколько отображение сайта в этой программе соответствует отображению в настоящих IE и не нашел отличий.
Инструменты
Единственный недостаток программы — на нее нельзя устанавливать дополнительные панели, как на обычный браузер. То есть, неплохое, как для IE, средство отладки - Internet Explorer Developer Toolbar использовать не получится.
Взамен, с сайта IE Tester можно скачать другую панель для отладки — DebugBar. Отображение DOM структуры, стилей, HTTP-запросов; есть JavaScript консоль. В целом неплохо, но я не нашел способа удобно модифицировать стилевые свойства или добавлять атрибуты. Впрочем, уже существующие атрибуты у элементов можно изменять.
Если DebugBar вам не понравился, можно попробовать Firebug Lite. Это более простая версия версия известного расширения для отладки на Firefox. Решение базируется на JavaScript — все, что вам нужно сделать — это вставить несколько строчек в код страницы.
Плюс в том, что можно добавлять свой CSS код на лету, чего я не нашел в DebugBar.
Думаю, используя эти инструменты можно с успехом отладить сайт.P.S.
На последок: интересный случай, который произошел со мной, пока я занимался одним сайтом.
Сайт в IE 6 выглядел просто ужасно. В IE 7 пару элементов «распались» — я исправил это в течении 15 минут. Но IE 6... На сайте не узнавались даже общие элементы. Вздохнув, я начал переделывать все с самых верхних элементов, постепенно вынося правки в коде в отдельный файл для IE6.
Через какое-то время, мне понадобился один стиль не из начала css файла, а где-то чуть после середины. Я с удивлением обнаружил, что он просто не работает, как будто его там нет, но начинает работать, если перенести его в отдельный документ.
Я потратил еще довольно много времени на выяснение причин — проверял мета теги, проходил валидацию. Все оказалось довольно просто. Приблизительно посередине css файла был комментарий.
Что-то вроде:
/* Кнопочки пыщь пыщь пыщь */
Все, что было до этого комментария, работало, все, что после — нет. Половина дня, чтобы узнать, что IE 6, видимо, не поддерживает русские комментарии в CSS.
>_<