Geek Answers Handbook

IE8 Doesn't recognize HTML5 (even with shiv)

I am completely stuck in a really strange IE bug, and no other posts about this problem seem to solve it. IE 8 does not apply CSS styles to HTML5 tags on the site I just launched. Previously, I always fixed this with shiv and / or code, for example:

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> <![endif]-->

Website http://www.unyouth.org.au/ .

IE8 seems to recognize the header, but as soon as it hits the ASIDE line, it stops working.

Does anyone have any idea why this is happening? Any help would be awesome.

Many thanks!

+6
source share
4 answers

Just figured it out, thanks @ Sparky672 for pointing me in the right direction.

For everyone who has this problem, a curve just below the colored shards was created using SVG. I got the impression that if IE wasn’t able to display the SVG, it would simply ignore it, however it looks like it throws everything under it.

I have not yet developed how to remove SVG for IE 8, since commenting it using IE conditional expressions does not work, but this is another problem. Removing it fixes the styling issue!

+5
source

I have a fix, wrap your embedded SVG in a larger one than IE9, if a comment.

 <!--[if gte IE 9]><!--> <svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg> <!--<![endif]-->
+3
source

Explorer absolutely hates invalid HTML.

Invalid HTML contains duplicate id . In particular, #site used in both <header> and <footer> . Some browsers just take the first occurrence and ignore the rest.

Row 440, Column 18: Duplicate ID site. <footer id="site">

Line 97, column 19: here was the first occurrence of the identity site. <header id="site">

0
source

To fix the SVG removal problem (after you have valid HTML), apply the following code to the top of the page instead of the standard <html> .

 <!--[if lt IE 9]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 9]><!--> <html> <!--<![endif]-->

This will apply the "lt-ie9" class to the entire page where the IE version is less than version 9. Any version, 9 or higher, will display a normal <html> without a class.

At this point, you have a class that you can use in CSS to remove any element for these browsers.

 .lt-ie9 svg {display: none;} /* this will remove all SVG elements with the class */

* Disclaimer . It has been a while since I tried this on IE8. It can only work if you transfer the SVG to div.lt-ie9 and instead apply it to the parent element - I don’t remember what errors are thrown. I would test it, but I'm on Ubuntu and without VM on this machine. *

NOTE. . Method for using IE conditional comments in your parent elements: <html> or <body> - Normal, there are many options. You should apply some research in this area and use a more general case than the one given here. This will allow you to get the wider benefits of this technique, as well as solve this problem specifically.

0
source

More articles:


All Articles