IE browser & compatibility modes on Win7

Community
1

We recently launched a website after testing it on the usual browsers on XP, Win7 and Mac.

All looked good on our side but the client was getting a messed up layout on a couple of Win7 computers!

This puzzled us and I did some research on IE on Win7 and according to what I’ve seen, when I go into the Development tools, the default setup is :
Browser Mode: IE8 and Document Mode: IE7

This causes a lot of layout problems because I use advanced CSS rules (including CSS3) and I use Modernizr to target IE7 and IE8 with other rules, occasionally.

It looks like when IE is in Browser Mode: IE8 and Document Mode: IE7, it pretends to be IE8 but behaves like IE7.

Therefore my special IE7 styles are not picked up by the browser, leading to a terrible rendering of the website.

If you want to see what I’m talking about (providing you’re on Win7), check out secri.fr in these modes. The nav is all messed up.

Have you had this issue before? Is there any way to work around it?

Cheers

2

Hmm, for me, IE8 defaults to the IE8 document mode.

Anyhow, the display: inline-block on the LIs seems to be throwing IE7 out. So maybe feed something else to IE7, like float: left (or just display: inline?). Just a suggestion.

3

Actually I do have an IE7-specific rule which is :


.ie6 nav#mainNav li,
.ie7 nav#mainNav li {
    display: inline;
    zoom: 1; }

It looks just fine in IE7 on XP, and as well as on Win7 when both the browser mode and the document mode are set on IE7.

However it doesn’t look good when the Browser mode is on IE8 and the Document mode on IE7, because it doesn’t pick-up the IE7 styles anymore.

Does it make sense ?

4

I would just dispense with display: inline-block and display: inline and use float: left for all browsers, which I find much more reliable.