IE8 not rendering HTML correctly

Question

I'm having some issues in IE8 that I have never seen before. Essentially the problem is that there is a navigation menu that has styles inside of the following markup:

      <section class="top-bar-section">

        <ul class="left">

          <li>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
          </li>

        </ul>

      </section>

    </nav>

However in IE8 I'm looking at the dom tree and the HTML is not being rendered as above. Below is a picture comparing the dom tree in both IE8 and Chrome.

IE8 and Chrome Dom tree comparision

You can see that the nav, section and UL elements are being closed without being parent and child elements of one another. This is having a causing a problem with the CSS rules as they require being child and parents to allow the css rules to be applied.

`HTML5` elements are not natively supported in `ie8` - http://caniuse.com/#feat=html5semantic there are `shivs/shim` fixes available though. — Nick R, Jan 14 '14 at 12:18
related: http://stackoverflow.com/questions/21086879/compatibility-issues-with-internet-explorer-8 — RononDex, Jan 14 '14 at 12:18
http://stackoverflow.com/questions/5449502/html5-and-css3-for-ie7-and-ie8 **OR** https://www.google.de/search?q=html5+suport+in+IE8&ie=utf-8&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb&gws_rd=cr&ei=8SrVUuviGNOAhAfX2ICACQ#channel=fflb&q=html5%20support%20in%20ie8%20and%20ie7&rls=org.mozilla:en-US:official&safe=off — NoobEditor, Jan 14 '14 at 12:19

score 2 · Answer 1 · answered Jan 14 '14 at 12:21

The <section> tag is not supoprted by IE8.

It is one of the new HTML5 tags and was not invented yet when IE8 was released. Therefore IE8 knows nothing about it.

IE8 default to not rendering unknown elements.

In order to make IE8 understand the <section> tag and other new HTML5 tags, you need to use the html5shiv polyfill script. This script helps IE8 to recognise these tags as being valid HTML, and thus to render them correctly.

You can also use Modernizr, which has additional functionality for helping deal with old browsers, and also includes the HTML5shiv functionality.

The alternative, of course, is simply to not use the new HTML5 tags; just use a <div> instead, and IE8 will work just fine with that without any javascript hacks.

Alex · Answer 2 · 2014-01-14T12:21:50.323

You need HTML5Shiv script for IE 8- to use HTML5 tags. The main fix is in creating HTML5 section element in the head of document:

document.createElement("section")

This somehow lets the CSS engine know that elements with that name exist.

The trick is that calling document.createElement("section") will suddenly cause IE to recognize the section element. No one knows why, but it works and you don’t even need to use the node returned by that function.

From this article, it explain why IE8- needs this script.

Rafa Romero · Accepted Answer · 2014-01-14T12:24:04.387

This is because you are using an HTML5 tag as section is, and of course IE8 doesn't support HTML5 tags as ou can see in CanIUse

Internet Explorer 8 and earlier versions, do not support the <section> tag.

You need something that "enable" HTML5 iN IE8 as HTML5 Shiving or Modernizr

HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications

Thank you! I overlooked this part entirely. – rowefx Jan 14 '14 at 12:32 — rowefx, Jan 14 '14 at 12:32

IE8 not rendering HTML correctly

3 Answers3