这是我的测试代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table
{
border-collapse: collapse;
}
td
{
background-color: gray;
}
td.first
{
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
width: 100px;
}
td.second
{
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
width: 100px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td class="first"></td>
<td class="second" colspan="3">Column 2</td>
</tr>
</tbody>
</table>
</body>
这只发生在 IE9 中。如果我添加一些填充，删除 td.second 中的边框半径，或者添加一个单元格并更改 colspan，它就会消失(无论如何对于这个示例)。我有另一个元素，做同样的事情不可行或根本行不通。
是什么导致了这种情况发生？是否有一些我可以使用的神奇 CSS 可以修复 IE9 而不会破坏其他浏览器？
最佳答案
试了一下，我必须确认 thirddot 的结论，即它是一个显示错误。如果您取出 colspan 或将第二行更改为:
<tr>
<td class="first">X</td>
<td colspan="2">Column 2</td>
<td class="second"> </td>
</tr>
然后没有更多的行。可能与圆 Angular 半径无法正确渲染有关，因为它是 IE 的新功能。
关于html - 为什么仅在 IE9 中我的表格单元格中有一条细垂直线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7521890/