[Solved] IE9 CSS compatibility mode

[oblekta]

Hey everyone,

I am currently testing a website with Internet Explorer version 6, 7, 8 and 9.

I am using IE-only stylesheets.

But I have found something strange happening in IE9 after you turn on the compatibility modes. It completely ignores my IE9 stylesheet and loads the IE7 version instead.

This is what I have stored in head my tag:

<!--[if IE 9]>
<link type="text/css" rel="stylesheet" href="/style/ie9.css">
<![endif]-->
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="/style/ie8.css">
<![endif]-->
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="/style/ie7.css">
<![endif]-->
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/style/ie6.css">
<![endif]-->

Does anyone know how to fix this?

[chrisburton]

Try this:

<!--[if IE 9]>
  <link rel="stylesheet" type="text/css" href="path/to/css.css" />
<![endif]–->

Edit:

I see you updated your code above. I thought it was missing a trailing hyphen.

Answer: http://stackoverflow.com/questions/11991399/ie9-is-using-conditional-ie7-stylesheet

[oblekta]

Hey Chris,

Thanks for your reply. Yes, I updated my post/code because some of it was filtered (so I used ‘Block Code’ instead).

I am using:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

as default in my head tag. But still manages to include the IE7-only stylesheet.

More thoughts about this?

[chrisburton]

Is it happening when you have the Inspector open?

[oblekta]

Yes, but also when the inspector is closed (of course after refresh).

But I have found a work-around. I have added this in my IE7 stylesheet:

*+html ul.product-popup span.text{ 
    margin-top:-40px;
}

Not really the most solid solution but it works for now.

Thank you for the support Chris!

[chrisburton]

The issue is with the Inspector and not your CSS. To verify this you can use Browserstack to test it. Just make sure you choose the correct settings (Windows, IE9).

[oblekta]

Thank you, I will try it out. :-)

[Author]

Posts