IE9和IE10中没有出现边框答案

【问题标题】：Border not appearing in IE9 & IE10IE9和IE10中没有出现边框
【发布时间】：2013-03-22 18:54:49
【问题描述】：

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

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

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

td{
   border:1px solid;
}

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

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

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

【问题讨论】：

标签： html internet-explorer-9 internet-explorer-10

【解决方案1】：

我遇到了类似的问题，上面的解决方案对我有用，只是稍作改动。（我用的是primefaces）

以下代码有效

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

以下代码无效

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

【讨论】：

【解决方案2】：

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

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

Example here

在 IE9 和 IE10 中都检查过

【讨论】：

如果您在 JSFiddle 中进行编辑，它将首先解决问题。但是，选择“更新”后，问题将返回。似乎与表格的一些交互（突出显示、在 JSFiddle 中更改、使用开发人员工具检查）将导致它正确呈现边框，但它不会在初始页面加载时呈现。
嗯...是的，这很奇怪...更新了答案
这解决了我的问题。需要对我的应用程序进行少量修改（td 上有一个全局 css 样式，必须用 border-bottom-style: none 覆盖）。谢谢。
@PavloShandro 这不应该工作。至少在我的测试中，使用 CSS 为 TR 元素设置边框不会在 IE10 中显示，因此上面解释的表格不会有左边框或下边框。

【解决方案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。

【讨论】：

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

【解决方案4】：

对我来说this 工作：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：