2

Consider following HTML code:

<style> td, tr { border:1px solid gray; } </style>
<table class="tableinfo" cellspacing="1" cellpadding="3">
  <tr>
    <td>asd</td>
    <td>bsd</td>
  </tr>
  <tr style="display: block;" >
    <td class="">ttt</td>
    <td class="">asd</td>
  </tr>
</table>

With doctype:

<!doctype html>

In IE9 everything works fine but in IE10 table is broken:

enter image description here

Why does this happen?

How to fix this?

One solution is to add following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

but this breaks styling in whole project.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
TomTom
  • 1,865
  • 1
  • 13
  • 14

1 Answers1

3

IE10 does not work like IE9 which does not work like IE8/7/6, etc. and none of those work like the other far more modern browsers. Your example in IE10 is how it works in the modern browsers, too, so IE9 is misbehaving. Changing the doctype is never a solution unless you're using the wrong one. Your solution uses the wrong one and puts you into quirks mode.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • Yes IE9 misbehaved changed 'block' to 'table-row' and works fine. I believe I had that code since IE6 where 'table-row' probably didn't work. Charm of legacy code :) – TomTom Dec 27 '12 at 08:15