As the moment if writing this tutorial, the HTML5 language may still encounter problems with cross-browser support. In most cases newer versions of browser take care of almost all HTML5 related issues, but in the case of Internet Explorer this may not be the case (especially version 9.0 and older). The Compatibility View mode, developed to display older websites, may create issues with the new standards.

The best way to approach IE problem is to create a CSS rule that causes relevant HTML5 element(s) to behave like block elements, and most of them will work (most of semantic elements after all are block elements anyway).

However, if for any reason you wish to have a website compatible with IE8 and older (BrenkoWeb.com is not one of them), then more has to be done.

There are numerous possibilities to overcome an old IE compatibility problem, but here we will touch only one of them, and that one is called the Shiv solution.

The shiv solution

This approach was created by Sjoerd Visscher and it works by evoking the JavaScript code like this:

<!--[if lt IE 9]>

  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

The IE versions 9.0 and older read comment from above as special instructions. The link to the shiv code must be placed in the <head> element in order to be executed before the page loads.

The code above should reset the elements unknown to Internet Explorer to a block level.

The DOM situation

In order to work with dynamic DOM scripting (such as JQuery) inside a HTML document, we need to “force” IE to receive a new element as an HTML block element. The example below shows how:

<html>

<head>

<style>blah { color: red; }</style>

<script>document.createElement("blah")</script>

</head>

<body>

<blah>Hello!</blah>

</body>

</html>

 

›› go to examples ››