IE11和IE8相差1个像素

Question

示例代码如下：

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

在 IE10 和 IE11 中，合并列中有 1 个像素的偏移：

http://i.stack.imgur.com/GSNMK.png

但是当我在 IE6-9 或 IE11 中使用 Edge=5 运行时，它呈现完美。

http://i.stack.imgur.com/NRhKE.png

几乎看不出来，但是当maintable的td的元素很大的时候，就很烦人了。我该如何解决这个问题？

提前致谢。

Answer 1

这取决于宽度的计算方式是否包括边框。

您可以使用 box-sizing 来解决这个问题 css 属性:

td{
    box-sizing: border-box;
}

Answer 2

最好的做法是 1) 在顶部添加适当的 DOCTYPE 声明，2) 不使用兼容模式，以及 3) 允许 table 单元格之间的边框宽度。因此，窄 table 单元格为 99px，宽单元格为 199px。

<!DOCTYPE html>
<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>
    <tr>
        <td>
            <table>
                <tr>
                    <td style="width:99px">
                        col1
                    </td>
                    <td style="width:99px">
                        col2
                    </td>
                    <td style="width:99px">
                        col3
                    </td>
                    <td style="width:99px">
                        col4
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
        <table>
                <tr>
                    <td style="width:99px">
                        col1
                    </td>
                    <td colspan="2" style="width:199px">
                        col2 col3
                    </td>
                    <td style="width:99px">
                        col4
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </table>
 </body>
</html>

这将表现相同，不仅在所有 IE 版本中，而且在所有其他浏览器中也是如此。

Answer 3

使用单个 table 有什么问题？

HTML

<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>
    <tr>
        <td style="width:100px">col1</td>
        <td colspan="2" style="width:200px">col2 col3</td>
        <td style="width:100px">col4</td>
    </tr>
</table>

CSS

 * {
     margin: 0;
     padding: 0;
 }
 table {
     border-collapse: collapse;
 }
 td {
     text-align: center;
     border: 1px solid black;
     padding: 0 0 0 0;
     overflow: hidden;
 }

DEMO

IE11和IE8相差1个像素

1 pixel difference between IE11 and IE8

html

css

internet-explorer-10

internet-explorer-11