I’ve heard that IE9 and IE10 are supposed to be compliant with web standards, particularly IE10. And according to the browser emulation tool I use, and according to most people who use these browsers, that seems to be the case. But I have a client with an about-to-be-launched website that shows me screenshots of the site in IE10 and it looks terrible: it’s not rendering CSS3 effects at all. No rounded corners. Dropdown menus that drop behind sliders. Block items not showing at their full height. Just generally a bad-looking website.
What I thought was particularly odd was that most IE9/IE10 browsers rendered the site correctly. So I did some research. Seems that sometimes (for a variety of reasons, none of which make any sense to me, but I’m a Mac guy; what do I know about the strange and mysterious world of Microsoft?) compatibility in IE9 and IE10 has to be “forced.” As though the browsers were a couple of recalcitrant juveniles that would skip school unless driven to the front door and dragged by the ear to their first class.
So, I found this code. Essentially, it drags IE9 and IE10 by the ear and makes them sit up straight and pay attention to CSS3 and other modern web standards:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
From now on, it goes in the header of all my websites.