Html код для explorer

dimensi / Тестирование и отладка верстки под IE.md

Начнем с того, что надо писать не под «ИЕ», а номера конкретных версий. Каждая версия ИЕ по своим особенностям и багам напоминает отдельный браузер, под который надо подкладывать свои, отдельные костыли. И что хуже, 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://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 доктайп (он самый короткий):

Этого хватит, чтобы избежать перехода в 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 способами:

1. В настройках веб-сервера или в приложении отдать заголовок X-UA-Compatible: IE=edge . В php это можно сделать командой header(«X-UA-Compatible: IE=edge»); , идущей до вывода самой страницы. Это надежный способ и работает в 99.9% случаев (кроме случая, когда пользователь нажал кнопку переключения режима). Вместо IE=edge можно писать желаемую версию ИЕ, которую нужно эмулировать, например, IE=7 , но эмулировать ИЕ умеет только более старые (и более глючные) версии. Зачем тебе такая радость?
2. Добавить, как можно выше внутри , мета-тег:

Это проще, так как не надо возиться с заголовками, но работает не всегда. Например,если ты использовал условный комментарий до мета-тега, то метатег проигнорируется (ИЕ переключится, верстка поедет).

Прежде чем говорить о багах, поговорим о том, как можно задать отдельные правила или html-код для отдельных версий ИЕ.

Особых багов нет. В ИЕ10 могут не поддерживаться какие-то совсем новые фичи CSS3/HTML5

Первая версия, поддерживающая (частично) HTML5/CSS3, а также Javascript ES5 (это Object.create() , Array.forEach , Function.bind и другие).

Проверять поддержку того или иного набора свойств удобно на caniuse, например: http://caniuse.com/#search=text-shadow

Поддерживается только HTML4.01/CSS2.1. Это значит, нет круглых уголков, теней, растягивания фона и других прелестей CSS3. Это значит, что элементы из HTML5 вроде не отображаются и к ним не применяются стили (есть решение, смотри html5-shiv ниже).

Зато CSS2.1 поддерживается неплохо, с небольшим количеством багов.

Не поддерживаются нововведения Javascript ES5.

Если кратко, то ИЕ6-7 работают по своим правилам, чем-то отдаленно напоминающие стандарты CSS2.1/HTML4. Если ты можешь избежать верстки под эти версии — избегай ее любой ценой.

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

В ИЕ до 9 версии включительно можно использовать условные комментарии, чтобы вставить кусок HTML-кода только для определенных версий ИЕ (или наоборот скрыть от них): http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii

С их помощью, например, можно подключить отдельный css-файл только для ИЕ и писать в него исправления верстки.

С помощью специальных конструкций можно сделать css-правила применимыми (или неприменимыми) для отдельных версий браузеров. Подробнее:

В ИЕ (до версии 9) есть фильтры, с помощью которых можно частично имитировать полупрозрачность ( opacity ), тени ( box-shadow , text-shadow ) и градиенты из CSS3. Учти, что тут надо тщательно все тестировать, так как фильтры могут приводить к искажениям формы букв, картинок, «грязному» тексту, искажениям вида страницы и тормозам.

Фильтры добавляются через css-свойства filter и -ms-filter (в ИЕ9). Это не те фильтры, что вводятся в новых стандартах CSS3, не перепутай (хотя свойства называются так же).

Для борьбы с проблемами ИЕ есть полифиллы и скрипты. Полифиллы добавляют поддержку фич из Javascript ES5.

Прежде чем их использовать, стоит учесть, что тут не все так просто. Те скрипты, которые эмулируют в старых ИЕ поддержку новых CSS3 свойств могут вносить серьезные ухудшения юзабилити: страница может начать тормозить, дергаться при прокрутке, дольше загружаться, могут съехать верстка. Потому стоит тщательно тестировать такие скрипты и выбирать: что важнее, круглые уголки или скорость работы и удобство использования страницы. Мне, например, скорость важнее, но заказчик может иметь другое мнение.

• html5-shiv: https://github.com/aFarkas/html5shiv — позволяет ИЕ8 (и ниже) использовать HTML5-теги вроде и применять к ним CSS-стили. Все, больше он ничего не делает. Поддержка CSS3 и круглых уголков от него не появятся. Принцип его работы (англ.): http://www.paulirish.com/2011/the-history-of-the-html5-shiv/ От него негативных последствий нет.
• PIE.htc — обещает поддержку в IE8 и даже ниже CSS3-свойств, но возможно ценой багов и сильных тормозов. Надо тщательно тестировать. Также помни, что в IE7 даже CSS2 толком не поддерживается.

(другие скрипты и полифиллы ищи в гугле)

Источник

How to View the HTML Source Code in Internet Explorer

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

What to Know

• In browsers like Internet Explorer, press Ctrl+U to access the HTML source code of a website.
• Some browsers may open source code in a new tab, but not all will.

Although the Microsoft Internet Explorer browser has long been superseded by Microsoft Edge, this venerable browser, which is now on version 11, still makes an appearance, usually in corporate environments where legacy web-based software was hard-coded for IE support.

How to Display HTML Code

With Internet Explorer, as with most browsers including Mozilla Firefox and Google Chrome, press the Ctrl+U keyboard shortcut to reveal the source of the web page.

The source is a fancy way of saying that the browser will display the HTML that powers the page rather than rendering the page on your behalf.

Most browsers display the source in a new tab. However, IE 11 renders the source in a menu bar along the bottom of the page. The Developer Tools screen includes a Debugger tool that shows the raw HTML in a panel.

Источник