Display:table-cell not working in IE9?

Question

I've got a table where I'm using the CSS display property to alter the layout. For full size browsers I use "block" and for smaller ones I use "table-cell". It works great in Firefox, Safari and Chrome, but somehow IE9 seems to mess it up of course... When I debug the page using Firebug and the likes, it's clear that all browsers except IE change the display:table-cell to display:block. But IE is stuck with display:block even though the CSS file clearly states it should be table-cell.

Is there any known issues with "table-cell" in IE9 or any known work arounds?

EDIT: The issue is not with table-cell, it's with Display:block on a table cell.

The problem I'm having can be found here: http://css-tricks.com/examples/ResponsiveTables/responsive.php Open in Chrome/Firefox and resize browser window - the table is responsive and changes to a narrow design. Open in IE9 and resize - the table is static and does not change.

EDIT2: In the previous example the responsive part is commented out for IE, because the creator knew that it would be messy. Nevertheless, I want to be able to create this kind of design that works in IE as well, so I need to make some kind of workaround for it to make it work.

Here is a JSFiddle that shows how IE9 messes up the responsive table when reponsive part is included: http://jsfiddle.net/2Mt37/

Answer 1

The X-UA-Compatible meta tag allows web page authors to select what version of Internet Explorer the page should be rendered as.

These are your options:

"IE=5"
"IE=EmulateIE7"
"IE=7"
"IE=EmulateIE8"
"IE=8"
"IE=EmulateIE9
"IE=9"
"IE=edge" which tells Internet Explorer to use the highest mode available to that version of IE.

But I recommend you to use this one:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

chrome=1 is for Google's Chrome Frame which is an open source browser plug-in. Users who have the plug-in installed have access to Google Chrome's open web technologies and speedy JavaScript engine when they open pages in the browser. It enhances your browsing experience in Internet Explorer and give you access to the latest HTML5 features as well as Google Chrome’s performance and security features.

Answer 2

I found the answer from an old thread, where @thirtydot wrote

I applied float: left to stuff. It kinda works.

How can I make "display: block" work on a <td> in IE?

As he said, it kinda works... IE9 stops rendering stuff all crazy, but there's still som aligning to do to make it look good. But that answer is good enough, I can fix the rest myself...