IE (8,9 & 10) 中的表格边框未显示答案

【问题标题】：Table borders in IE (8,9 & 10) not showingIE (8,9 & 10) 中的表格边框未显示
【发布时间】：2014-03-30 15:06:57
【问题描述】：

我有一个表格，我希望行上有水平边框，这在 真正的浏览器中可以正常工作，但在 IE 中它只是不显示，这是我的 CSS 和正在发生的事情的图像.我该如何解决这个问题？

截图

CSS

.defaultTableStyle {
    border-collapse: collapse;
    text-align: left;
    font-size: 12px;
    width: 100%;
}

    .defaultTableStyle th {
        background: #eee;
    }

    .defaultTableStyle th, .defaultTableStyle td {
        border-top: 1px solid #ccc;
        padding: 6px 8px;
        position: relative;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
    }

HTML

    <table class="defaultTableStyle" id="resultsTable">
        <tr>
            <th></th>
            <th>Date</th>
            <th>Success Rate</th>
            <th>Coverage</th>
            <th>Duration</th>
        </tr>
            <tr style="" data-result-id="3362" data-successrate="100" data-coverage="2" class="resultDataContainer">
                <td><span class=""><i class="icon-ok"></i></span></td>
                <td>27/02/2014 09:16:29</td>
                <td>100%</td>
                <td>2%</td>
                <td>1 sec</td>
            </tr>
            <tr style="" data-result-id="3361" data-successrate="100" data-coverage="2" class="resultDataContainer">
                <td><span class=""><i class="icon-ok"></i></span></td>
                <td>27/02/2014 09:15:28</td>
                <td>100%</td>
                <td>2%</td>
                <td>1 sec</td>
            </tr>

【问题讨论】：

如果将边框应用到顶部和底部，是否仍然这样做？
@Timmah 我在底部多了一个边框，但不是在所有行上！
你能粘贴一些表格 HTML 吗？
@Pattle 查看我的更新
你把IE的缩放设置缩小了吗？

标签： html css internet-explorer html-table

【解决方案1】：

应该与添加边框底部以及现有的 css 一起使用

.defaultTableStyle th, .defaultTableStyle td {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 6px 8px;
    position: relative;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

【讨论】：

【解决方案2】：

我建议删除position:relative，部分原因是它对单元格没有任何作用，部分原因是纯粹的 IE 恐惧（它在定位方面做了奇怪的事情）。

除此之外，试试 Binita 的回答。但是，不要使用两个速记声明，而是尝试：

border: 1px solid #ccc;
border-width: 1px 0;

【讨论】：

我确实尝试过长手版本但无济于事......令人惊讶的是，虽然这是 position: relative; 搞砸了，谢谢！
此外，您应该在<tr> 行级别应用边框样式以避免每个单元格重复，从而提高性能。
如果我没记错的话，样式化 TR 可能会产生不稳定的结果。

【解决方案3】：

所以你可以在 TD jsfiddle.net/HarishBoke/3fRub 中添加 border-bottom:1px solid #ccc;

【讨论】：

【解决方案4】：

对我来说这很有效：

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

来自here。

【讨论】：

【解决方案5】：

检查您的 IE 缩放是否设置为 100%。当我注意到我正在使用 80% 缩放时，我花时间寻找解决方案。直到现在，当我输入这个答案时，我才发现上面的评论指向了这个问题。

【讨论】：