CODEWITHSUNDEEP
htmlinternet-explorermodernizr
Steph
Steph

Reputation: 635

Modernizr, HTML5 and a blank web page in Internet Explorer

I'm building my first set of web pages using the HTML5 doctype, elements (<section>, <header>, <footer>...) and input types/attributes (email, tel, placeholder...).

To satisfy IE's varying levels of support, I decided to go with Modernizr combined with Eric Meyer's reset including the basic HTML5 reset styles that give new elements display:block.

As recommended I generated and downloaded a custom version of Modernizr selecting some CSS3 properties and only the HTML5 elements I need. Also included is html5shiv v3.4, html5shiv v3.4 w/printshiv and media queries.

After including the JS file in the head as directed, the result is completely blank pages in all versions of IE.

If I remove it, I see my HTML with some of it styled correctly.

If I link up to a legacy version of Modernizr (found on a site that works in IE9 and uses Modernizr) I get the same result as though I have no Modernizr included, just some of my elements styled and others not.

Am I completely missing the point of Modernizr here? I thought it would enable me to mark up and style elements such as <nav>, <header> etc.

Upvotes: 2

Views: 1582

Answers (1)

J_A_X
J_A_X

Reputation: 12847

I think I might of figured it out. I started removing features from modernizr, one by one, seeing what could of affected the rendering of my site in IE9. It appears that the "Add CSS Classes" extra option was overriding one of my styles (I'm using Bootstrap, so it could of been that as well).

Either way, simply remove the "Add CSS Classes" extra or set a prefix to it. This fixed all problems for me and it's not working fine for all versions of IE.

Upvotes: 1

Related Questions