IE11 和 IE8 之间相差 1 像素

下面是示例代码：

<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 个像素偏移：

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

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

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

它几乎不明显，但是当主表的td元素很大时，它非常烦人。我该如何解决这个问题？

提前谢谢。

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

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

td{
    box-sizing: border-box;
}

最好的办法是 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版本中，而且在所有其他浏览器中的行为都相同。

使用单个表有什么问题？

.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;
 }

演示

相关内容

最新更新

热门标签：