Bootstrap based theme broken in IE10

Question

http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10. A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png Any ideas on how to fix this?

regards Oskar

Answer 1

So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.

The immediate source of the problem is the img in the navbar.

If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.

Digging deeper into the issue, here's the css setting for img in bootstrap:

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

Ok, so what in the world is width: auto\9? Well, looks like it is an IE hack, but a hack that does not apply to IE 10.

1. CSS \9 in width property
2. http://www.paulirish.com/2009/browser-specific-css-hacks/

So as a quick fix, I suppose one thing you could do would be to set a custom css property on the img in the navbar that is exact about the width of the img.