IE8 单元格角边框答案

【问题标题】：IE8 Cell Corner BorderIE8 单元格角边框
【发布时间】：2011-08-12 13:13:26
【问题描述】：

我正在尝试在 IE8 中显示表格的列分隔符。我正在使用在 Chrome 和 Firefox 中运行良好的 CSS，但在 IE8 中，带有黑色列分隔符的表格单元格的角落出现不同。您可以查看下图中的差异。第一张图片来自 IE8，它显示了我不想要的结果，第二张图片来自 Chrome，它显示了我希望表格的显示方式。

源码如下，也可以在http://jsbin.com/obava4/2/edit编辑：

table.testresults 
{
     border-collapse:collapse;
}


table.testresults td {
    padding: 3px;
    border-style:solid;    
    border-width: 4px;
    border-color:lightgray;
    font-size: 8pt;
    font-family: Arial;
    font-weight:400;
}

table.testresults *.borderleft {
    border-left-color: black;
    border-left-style: solid;
    border-left-width: 5px;

}

table.testresults th { 
    font-size: 0.7em;
    font-family: Arial;
    padding: 3px;
    spacing:0px;
    border-bottom-color: lightgray;
    border-style:solid;
    border-width: 4px;
    border-color:lightgray;
}

</style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>


</head>

<body>
<table class="testresults">
          <col id="col1"><col id="col2"><col id="col3">
          <tr class="currenv">
            <th class="corrcorrenv borderleft" align="left" colspan="1">CORR of COR</th>
            <th class="correnv borderleft" align="left" colspan="1">CORR</th>

          </tr>
      <tr class="currenv">
        <th width="50px" class="resultheader borderleft" align="left">Result</th>
        <th class="nowrap">Age &nbsp;&nbsp;&nbsp;</th>
        </tr>
        <tr>
          <td class="borderleft" TestResultsID="">Pased</td>
    <td>row.ARAge</td>


 </tr>
    </table>
</body>
</html>


</body>
</html>

【问题讨论】：

标签： css internet-explorer internet-explorer-8 html-table border

【解决方案1】：

恐怕这只是 IE 呈现表格单元格边框的方式。或者，您可以尝试将单元格内容包装在 div 中并为 div 提供边框，但让 div 填充表格单元格是一个相当大的挑战 - 参考this SO question。

【讨论】：

谢谢托马斯，这就是我所害怕的。
这很有趣，你会认为他们已经在 IE9 中修复了它。哦，好吧。