Today I sent out a test link for a website my team is building and someone dropped me a message saying that it looks terribly broken in Internet Explorer, attaching a screenshot. And my, did it look broken. The majority of the elements didn't seem to have any styling applied to them at all!
I quickly realised that the person was running IE8 and the elements were not being styled because we were using HTML5 tags such as
<article> which are not supported in IE8. So I knew right away that this would be a quick fix: «we just need the shiv», I said, referring to The HTML5 Shiv, a small file that enables support for modern elements on ancient browsers.
To install the shiv you wrap the call to the JS file in a conditional comment so that only the browsers that actually need the file will actually load it.
<!--[if lt IE 9]><script src="path/to/your/html5shiv.js"></script><![endif]-->
And that's it! Well, usually. My site was still broken and I didn't understand why — the shiv was being correctly loaded but the elements were still not being styled in IE8.
After digging around for about an hour, I realised that the problem were my SVGs. I've knowingly used inline SVGs on this site, even though they're not supported in IE8, but I always thought that non-supporting browsers would just fail to display them. Turns out that IE8 actually freaks out and breaks when it finds the SVG elements.
To overcome that, I simply wrapped all the SVG declarations with conditional comments that prevent the code from being read in versions of IE prior to 9.
<!--[if gte IE 9]><!--><svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><g id="icn-video"><path d="M35,47.3V32.7L47.9,40L35,47.3z M37,36.1v7.7l6.9-3.9L37,36.1z M40,59c-10.5,0-19-8.5-19-19s8.5-19,19-19s19,8.5,19,19S50.5,59,40,59z M40,25c-8.3,0-15,6.7-15,15s6.7,15,15,15s15-6.7,15-15S48.3,25,40,25z"/></g><!-- ... more declarations here ... --></defs></svg><!--<![endif]-->
It works, but I'm not too convinced about this solution. It doesn't cause any harm because modern browsers will treat the conditions as plain comments and ignore them, but I don't like the idea of having to wrap every SVG declaration with that piece of legacy code. What are your thoughts? ∎