valentin vannay

valentincognito

[IE8] Common problems and their solutions

2015-11-12

We are in 2015, on the edge of flying cars and self-lacing shoes and yet some people like myself still need to work with obsolete versions of Internet explorer... When I work for my independant projects I never care past IE9 version. But when I work in company I still have to ensure the constancy of the websites on IE8. FYI in South Korea (where I work at the moment) according to google analytics 20% of customers visit our websites on IE8 (with a ~20k daily audience). This being said I want to share with you some of the ressources I use and the tricks I found over the years. I will update this post everytime I find new things and I am off course open to any ideas and suggestions !  

Media queries support IE 6-8

If you are developing a responsive website with media queries this is a very handy script that will allow you to use the CSS min/max-width media queries. All you have to do is include the js script on your pages and let the magic happen. Source https://github.com/scottjehl/Respond Demo http://scottjehl.github.io/Respond/test/test.html
 

Placeholder in an input

The placeholder argument is an html5 property. So if you want to have a placeholder on IE8 you have to use a script. Thanks to Mathias Bynens we have a very easy solution for that. In the above codepen you can simply copy the JS code in a file, save it as for example, placeholder.js and call it in your pages. Source http://codepen.io/engza/pen/DptoH
 

Iframe not respecting z-index

There is something particulary anoying on Internet Explorer (not only IE8) is that the iframes does not respect the z-index atribute. There is a very good explanation why just here. It is a bummer when often you have a fixed navigation bar that stay on top when you scroll the page and you have an youtube video embed in an iframe in your content somewhere. But it is pretty simple to fix, all you need is to place on invisible iframe between the element you want to put on top and the other iframe. Although the post from stackoverflow is pretty good I would like to improve and clarify the method here. Here is the one-line iframe you can place within the div you want to display on top of any other iframe:
 //Invisible iframe
<iframe style="border: none;position: absolute;top: 0;left: 0;height: 82px;width: 100%;z-index: -1;filter: alpha(opacity=0);" src="about:blank"></iframe>
(the height of your invisible iframe should be the same height of the element on top of it) But wait, there is more, this might not work all the time especially on IE8. I also had the case on IE9+ the div was blinking on top of my youtube iframe when I was scrolling. To fix that you have to add the "vmode opaque" attribute behin the embed youtube link. Here is how it might look like:
//A youtube embed iframe
<iframe width="700" height="200" src="https://www.youtube.com/embed/aabbcc?rel=0&amp&showinfo=0&autoplay=1;wmode=opaque;" frameBorder="0" allowfullscreen ></iframe>
And now it should work, if not please do not hesitate to ask, I scratched my head long enough to answer any questions on the subject :)