1

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

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

将 IE 上的单元格边框加倍

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

在 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 Strict 来测试这个孤立的问题。我的页面除了这个问题顶部的笔中的代码之外几乎没有其他内容，因此没有其他因素。我也在多台机器上尝试过这个，我在办公室的其他开发伙伴运行 IE10，所有这些都具有相同的行为。

4

0 回答 0