htmlhtml-tableinternet-explorer-10compatibility-mode

IE 10 forces strict mode

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.

Solution

  • 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.