在ie7兼容视图中，所有边框都不显示在表格中

Question

不确定为什么边框显示不正确。我试过了：

/* ------ global ------ */

body {
margin: 0 auto;
padding:0 0;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
}


/* ------ Content Wrapper ------ */
#wrapper {
margin: 0 auto;
width:760px;
text-align:left;
}

#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
}

  #content table td {
border:solid 1px black;
 } 

我是否需要列出所有CSS边框属性以获取整个表格的边框，如下所示：

border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
or more ......

我还没有这样做，但我过去不得不用一些表来做这个以获得IE7的所有方面的边界。这是最后的手段，因为我不知道还能做什么。

Answer 1

考虑following jsFiddle，它在IE7中通过在表格单元格上显示 1像素纯黑色边框正常工作。

我没有更改您的任何代码，但添加了规则以在表格标题单元格table th以及表格数据单元格table td中包含边框。

<强> HTML：

<div id="content">
    <table>
        <tr>
            <th scope="col">Column</th>
            <th scope="col">Column</th>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </table>
</div>

<强> CSS：

#content table {
    font-size: 0.8em;
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

#content table th,
#content table td {
    border: solid 1px black;
    padding: 5px 10px;
}

如果您的表格单元格仍然没有显示任何边框，您的样式表中可能会有一个或多个规则，这些规则稍后会显示 - 或者有更多CSS Specificity - 这些规则会覆盖您的样式。

Answer 2

尝试使用border-collapse：为IE7分开，如下所示：

#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
*border-collapse:separate;
}

Answer 3

应用border-collapse：折叠到表中，它应该修复它：）