HTML5shiv, Lightbox2 by Lokesh Dhakar и Internet Explorer 8.

21 июля 2012 года.

Все мы любим быть на острие прогресса, а потому используем при вёрстке очень замечательные возможности HTML5. Мы конечно немного задумываемся о «глупых» пользователях старых браузеров и потому подключаем у себя на странице скрипт html5shiv, который должен обеспечить поддержку тегов стандарта HTML5 в этих браузерах. Вот и я поступал как и все, но расслабившись доверился обещаниям разработчиков и не взглянул на полученную страницу в Internet Explorer 8. Сделал я это зря, потому что всё получилось не так как я предполагал. И сейчас я расскажу, что пошло не так.

Входные данные.

  • Страницы, которые на внешнем уровне обёрнуты в теги HTML5.
  • Скрипт html5shiv, подключённый из trunk-а CDN (сети распространения контента) Google.
    <!--[if lt IE 9]>
    <!script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"><!/script>
    <![endif]-->
  • Скрипт Lightbox2, написанный Локеш Дхакаром (Lokesh Dhakar), немного устаревшей версии (той что базировалась на Prototype).
  • Internet Explorer 8.

Первая проблема.

Страница без Lightbox2 в IE8 подтягивает CSS из html5shiv только после перезагрузки страницы ещё раз.

Решение.

Подключать html5shiv локально (как это теперь написано на сайте скрипта), а не из CDN (сетей распространения контента).
<!--[if lt IE 9]>
<!script type="text/javascript" src="js/html5shiv.js"><!/script>
<![endif]-->

Вторая проблема.

Страница с Lightbox2 в IE8 не подгружает с помощью html5shiv объявление тегов HTML5. Симптоматично это выглядит как отсутствие содержимого обёрнутого тегами HTML5 (поскольку у меня всё содержимое обёрнуто в HTML5, то я видел пустую страницу).

Решение наполовину.

Подключить html5shiv локально, а не из CDN (сетей распространения контента). Обновить Lightbox2 до актуальной версии. А наполовину, потому что теперь у вас в IE8 всё отображается, но Lightbox2 отрабатывает только заливку фона страницы, но не отрисовывает картинку. Можно отключить Lightbox2 для IE8 и тогда там получаются просто ссылки на изображения.
<!--[if IE]><![if gte IE 9]><![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!--[if IE]><![endif]><![endif]-->

Решение окончательное.

Отказаться от использования html5shiv и использовать вместо него код подсмотренный в исходном коде CSSing.org.ua и подтверждённый статьёй «Добавляем поддержку тегов HTML5 и Web Fonts для Internet Explorer 8» на Хабрахабре.
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<style>
header, nav, section, article, aside, footer { display:block; }
</style>
<![endif]-->