border - 边框崩溃在 IE10 中不起作用

Question

有没有人遇到过在 IE10 中不起作用的表格上的边框崩溃的解决方案？

我在需要的地方使用了网站上的表格，它们在所有其他浏览器中都显示得很好，但是由于 IE 10，边框变得很厚。

任何帮助表示赞赏

Answer 1

上面的问题可能是几个月前的问题，但今天我遇到了同样的问题，并认为我至少可以提供一些可能的解决方案，即使它不是一个理想的解决方案。

正如问题所描述的，使用border-collapse 会导致IE10 中的边框变粗，即使没有可以叠加的边框。省略border-collapse 时，border-width 保持其正常厚度。但是，省略边框宽度会导致单元格之间出现空间。

获得所需结果的唯一可能替代方法是根本不使用边框折叠。相反，使用 'border-spacing:0px;' 摆脱单元格之间的空间并非常具体地定义边界。

例子：

这个

table{
    border-collapse: collapse;
}
table td{
    border: 1px solid black;
}

会成为

table{
    border-spacing: 0px;
    border-top: 1px solid black;
    border-right: 1px solid black;
}
table td{
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

就像我之前说的：它并不理想，但至少它会提供所需的跨浏览器结果。

注意： IE10 中的问题仅在使用 1px 的边框宽度时才会出现。使用border-collapse:collapse时，1px的border-width将导致2px；在 IE10 中。当使用更高的边框宽度时，结果将是正常的。