Search code examples
htmlcssinternet-explorer-10internet-explorer-11

1 pixel difference between IE11 and IE8


Here is the sample code:

<html>
 <head>
  <title> IE11 </title>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    table{
        table-layout: fixed;
        border-collapse: collapse;
        border-left: 1px solid black;
        border-right: 1px solid black;
    }
    td{
        text-align: center;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
        padding: 0 0 0 0;
        overflow: hidden;
    }
  </style>
 </head>

 <body>
  <table width="400px">
    <tr>
        <td>
            <table width="400px">
                <tr>
                    <td style="width:100px">
                        col1
                    </td>
                    <td style="width:100px">
                        col2
                    </td>
                    <td style="width:100px">
                        col3
                    </td>
                    <td style="width:100px">
                        col4
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
        <table width="400px">
                <tr>
                    <td style="width:100px">
                        col1
                    </td>
                    <td colspan="2" style="width:200px">
                        col2 col3
                    </td>
                    <td style="width:100px">
                        col4
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </table>
 </body>
</html>

In IE10 and IE11, there is an 1 pixel shift in the merged columns:

https://i.sstatic.net/GSNMK.png

But when I run it in IE6-9 or in IE11 with Edge=5, it renders perfectly.

https://i.sstatic.net/NRhKE.png

It is barely noticeable, but when the elements of td of main table is large, it's very irritating. How can I fix this?

Thanks in advance.


Solution

  • It depends on how width is calculated including borders or not.

    You can solve this using box-sizing css property:

    td{
        box-sizing: border-box;
    }