Question

在IE 8（标准模式）中，设置为border-collapse:collapse并在td上设置边框的表格似乎会使边框加倍。

边框在单元格之间以及表格本身周围加倍。

doubled up cell borders on IE

我正在寻找的行为更像是Chrome渲染边框折叠表的方式。即。两个单元格之间折叠的边框的实际像素宽度（每个单元格的边框为1px）为1px。

collapsed border (as desired) rendered in Chrome

在放在一起的示例笔中，如果您在Chrome或IE中运行此功能，您可以看到渲染的差异，以查看上述差异。

http://codepen.io/anon/pen/tfzus

有没有办法让IE根据Chrome渲染表单边框？

我尝试了border-spacing : 0，但它不会影响折叠表。

编辑：我尝试了一种基于位置的方法，我根据单元格位置限制相邻边框（注意使用'：first-child'而不是'：last-child'更广泛兼容性）。这个CSS的一个例子如下......

table.formatted-table {
  border-collapse : seperate;
}

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

table tr:first-child td {
  border-top : 1px solid black;
}

table tr td:first-child {
  border-left : 1px solid black;
}

http://codepen.io/anon/pen/KACxv

我真的不认为这是一个理想的解决方案，如果你有一个更好的解决方案（即一个我不知道的明显设置），请告诉我！

我使用的是HTML5 doctype <!DOCTYPE html>，但尝试将doctype切换为HTML4严格来测试这个孤立的问题。我的页面除了此问题顶部的笔中的代码之外几乎没有其他内容，因此没有其他因素。我也在多台机器上试过这个，我在办公室的其他设备上运行IE10都具有相同的行为。

使用边框折叠时解决IE双边界行为

0 个答案: