IE9和IE10中边框不显示

Question

我有一个表格边框显示不正确的问题。以下是重现此问题的代码。

这个 代码 在火狐和谷歌上可以得到预期的结果，但在IE9和IE10上无法正常显示。

唯一应用的css是 border-collapse: collapse 和

td{
   border:1px solid;
}

第二个表格行应该沿着整个底部有一个边框，但是第二个表格单元格缺少边框。可以在这张图片中看到：image。

一旦突出显示表格的一部分，此问题就会消失，但预期的结果是边框应该一开始就存在。有时必须更新Fiddle以使问题出现。

这是一个已知的IE问题吗？还是必须应用更多的样式？

- DHooper

Answer 1

我遇到了类似的问题，但是您上面提供的解决方案对我有所帮助，只需稍作修改即可。（我使用了PrimeFaces）

以下代码可行：

.ui-datatable tbody>tr>td {
    border-top: 1.1px solid; 
}

以下代码不起作用。

.ui-datatable tbody>tr>td {
    border-top: 1px solid; 
}

- Christian Hofer

Answer 2

由于这是由于 border-collapse: collapse 引起的，因此也可以通过手动放置正确位置的边框并使用 border-collapse: separate 来解决。

table { 
    border-collapse: separate;
    border-spacing: 0;
}

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

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

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

这在IE7及以下版本中不起作用，因为它们不支持border-spacing和:first-child。

- Henrik Ripa

---

在IE11中，border-collapse: separate和border-spacing: 0对我有效。 - Rob Darwin

Answer 3

对我来说，this 是有效的：

<table cellspacing="0" and cellpadding="0"> ... </table>

- chris

Answer 4

最好的解决方案我能找到的是：

table{border-top:1px solid #000;}
tr{border-left:1px solid #000;border-bottom:1px solid #000;}
td{border-right:1px solid #000;}

这里有一个示例

在IE9和IE10中都经过检查。

- Pavlo Shandro

---

如果您在JSFiddle中进行编辑，它将首先解决问题。但是，在选择“更新”后，问题将会重新出现。似乎与表格的某些交互（高亮显示、在JSFiddle中更改、使用开发人员工具进行检查）会导致其正确呈现边框，但是它不会在初始页面加载时呈现。 - DHooper

嗯……是的，这很奇怪。 - Pavlo Shandro

这解决了我的问题。 需要对我的应用程序进行轻微修改（td上有一个全局css样式，必须使用border-bottom-style: none进行覆盖）。 谢谢。 - DHooper

@PavloShandro 这是不应该的。至少在我的测试中，使用CSS为TR元素添加边框在IE10中不会显示，因此上面解释的表格将没有左边界和底边界。 - Tobberoth

Answer 5

我发现在 th/td 上使用 position: static; 效果很好。

table {
    border-collapse: collapse;
    border: none;
}
tr {
    border: none;
}
th, td {
    position: static;
    border: 1px solid #000;
}

- intrepidis