Html IE11和IE8之间的1像素差异_Html_Css_Internet Explorer 10_Internet Explorer 11

Html IE11和IE8之间的1像素差异

html css

Html IE11和IE8之间的1像素差异,html,css,internet-explorer-10,internet-explorer-11,Html,Css,Internet Explorer 10,Internet Explorer 11,以下是示例代码： <html> <head> <title> IE11 </title> <style> *{ margin: 0; padding: 0; } table{ table-layout: fixed; border-collapse: collapse; border-left: 1px solid blac

以下是示例代码：

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


IE11
*{
保证金：0；
填充：0；
}
桌子{
表布局：固定；
边界塌陷：塌陷；
左边框：1px纯黑；
右边框：1px纯黑；
}
运输署{
文本对齐：居中；
边框底部：1px纯黑；
右边框：1px纯黑；
填充：0；
溢出：隐藏；
}
可乐
可乐
可乐
可乐
可乐
COL2COL3
可乐

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

但当我在IE6-9或IE11中使用Edge=5运行它时，它的渲染效果非常完美

这几乎不值得注意，但当主表的td元素很大时，它非常令人恼火。我怎样才能解决这个问题

提前感谢。

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

可以使用框大小调整css属性解决此问题：

td{
    box-sizing: border-box;
}

最好的做法是1）在顶部添加适当的DOCTYPE声明，2）不使用兼容模式，以及3）允许表格单元格之间的边框宽度。对于窄表单元格，这将是99px，而对于宽表单元格，这将是199px


IE11
*{
保证金：0；
填充：0；
}
桌子{
表布局：固定；
边界塌陷：塌陷；
左边框：1px纯黑；
右边框：1px纯黑；
}
运输署{
文本对齐：居中；
边框底部：1px纯黑；
右边框：1px纯黑；
填充：0；
溢出：隐藏；
}
可乐
可乐
可乐
可乐
可乐
COL2COL3
可乐

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

使用单个表有什么问题

HTML

原始源文件中也没有DOCTYPE吗？我不认为有edge=5这样的东西。我已经尝试了所有类型的DOCTYPE！DOCTYPE，但什么也没发生！这很奇怪，因为如果我添加一个DOCTYPE并将其加载到IE8中，它的行为方式与IE11相同。谢谢，这就是我所需要的。对不起，我没有足够的声誉来投票；）。我会尽快做的；）要接受答案，只需单击复选标记✓, 不要投赞成票。我认为“为什么你不能使用一个表”应该是一个评论，而不是一个答案。

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

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