Internet Explorer 8 bug with display: table

Question

I have the weirdest bug ever... I\'m experimenting with display: table, and my proof of concept works on the very first try after opening a new process, but any subsequent r

Answer 1

The problem when the browser is in compatibility view. (as suggested by taylorjes)

When the page is displayed in normal view, the cells are horizontal. When displayed in compatibility view, the cells are vertical.

As I said in my comment, I would highly discourage the display:(table/table-row/table-cell) CSS property. It is not well supported and is bound to have quirks.

Honestly if what you are displaying is tabular data, then use a table. Tables are only evil when used for layout.

Answer 2

It turns out that, as suggested by some, IE's compatibility mode was triggered somehow.

I found out that it's because I'm running the page on an Intranet, and by default compatibility mode is enabled for Intranet websites.

This can be disabled by going to Tools > Compatibility View Settings and unchecking the Display intranet sites in Compatibility View box. Of course this is not something you necessarily want to ask all your users to do, so it was suggested to me to add

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

in the header, which works great.

More info on that: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx