html - IE9和IE10中没有出现边框

Question

我遇到了表格边框无法正确显示的问题。下面是一个重新创建问题的小提琴。

这个小提琴在 FF 和 Chrome 中产生了预期的结果，但在 IE9 和 IE10 中没有。

只有正在应用的 CSS 是边框折叠：折叠和

td{
   border:1px solid;
}

第二个表格行应该在整个底部都有一个边框，但是第二个表格单元格上没有边框。在这张图片中可以看到。

一旦突出显示表格的一部分，这个问题就会消失，但预期的结果是边框应该首先存在。有时必须更新小提琴才能出现问题。

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

Answer 1

我有一个类似的问题，你上面的解决方案对我有用，但有一点改变。（我使用了素面）

以下代码有效

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

以下代码不起作用

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

Answer 2

我能找到的最佳解决方案：

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 中检查

Answer 3

由于这是由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.

Answer 4

对我来说，这很有效：

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

Answer 5

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

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