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

几乎没有人注意到，但是当主表的td元素很大时，它会非常恼人。我该如何解决这个问题？

提前致谢。

Answer 1

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

您可以使用box-sizing css属性解决此问题：

td{
    box-sizing: border-box;
}

Answer 2

最好的办法是1）在顶部添加适当的DOCTYPE声明，2）不使用兼容模式，3）允许表格单元格之间的边框宽度。因此，窄表格单元格为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

使用单个表格有什么问题？

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个像素差异

3 个答案: