Geek asks and answers

Display: table-cell not working in IE9?

I have a table in which I use the CSS display property to change the layout. For full-size browsers I use a "block", and for smaller browsers I use a "table-cell". It works fine in Firefox, Safari and Chrome, but for some reason IE9 seems to mess it up, of course ... When I debug a page using Firebug and the like, it is clear that all browsers except IE change the display: table- cell to display: block. But IE is stuck in the display: block, although the CSS file clearly states that it should be a table cell.

Are there any known issues with the "table-cell" in IE9 or any known work around?

EDIT: The problem is not in the table cell, but in the Display: block on the table cell.

The problem I encountered can be found here: http://css-tricks.com/examples/ResponsiveTables/responsive.php Open in Chrome / Firefox and resize the browser window - the table responds 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 it would be messy. However, I want to be able to create a design that also works in IE, so I need to make some workaround for it to work.

Here is a JSFiddle example that shows how IE9 messed up a responsive table when the reprocessing part is enabled: http://jsfiddle.net/2Mt37/

+5
source share
2

, @thirtydot

float: left . .

"display: block" <td> IE?

, ... IE9 , , . , ...

+8

X-UA-Compatible - , Internet Explorer .

:

"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 Google Chrome Frame, . , , - Google Chrome JavaScript . Internet Explorer HTML5, Chrome Chromes.

+6

More articles:


All Articles