问题
我有一个 <div>在最初用 visibility: hidden; position: absolute 隐藏的页面上.问题是如果 <div>以这种方式隐藏包含一个使用 border-collapse: collapse 的表并在其单元格上设置了边框，该边框仍然显示“穿过”隐藏的 <div>在 IE 上。
通过在 IE6 或 IE7 上运行下面的代码来亲自尝试一下。你应该得到一个白页，但你会看到:
alt text http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png
可能的解决方法
由于这是在 IE 上发生的，而不是在其他浏览器上发生的，因此我认为这是一个 IE 错误。一种解决方法是添加以下代码来覆盖边框:
.hide table tr td {
border: none;
}
我在想:
- 这是一个已知的 IE 错误吗？
- 是否有更优雅的解决方案/解决方法？
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
/* Style for tables */
.table tr td {
border: 1px solid gray;
}
.table {
border-collapse: collapse;
}
/* Class used to hide a section */
.hide {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="hide">
<table class="table">
<tr>
<td>Gaga</td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
这是一个 IE 错误。 Firefox 无法识别使用“border-spacing”的“border-collapse”，这不会导致此问题。使用“display:none”的解决方案有效，但还有另一种可能性。如果可见性属性是使用 Javascript 设置的，那么边框也会被隐藏(正如预期的那样)。
关于css - IE CSS 错误 : table border showing div with visibility: hidden, position:absolute，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/430485/