css - 在 ie7 兼容性 View 中，所有边框均未显示在表格上

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 ......

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

Answer 1

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

我没有更改您的任何代码，但添加了一条规则以在表格标题单元格 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 — 覆盖您的样式。