IE CSS 错误：表格边框显示具有可见性的 div：隐藏，位置：绝对
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/430485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE CSS bug: table border showing div with visibility: hidden, position: absolute
提问by avernet
The issue
问题
I have a <div>on a page which is initially hidden with a visibility: hidden; position: absolute. The issue is that if a <div>hidden this way contains a table which uses border-collapse: collapseand has a border set on it cells, that border still shows "through" the hidden <div>on IE.
我<div>在页面上有一个最初用visibility: hidden; position: absolute. 问题是，如果以<div>这种方式隐藏的表格包含使用border-collapse: collapse并在其单元格上设置边框的表格，则该边框仍会<div>在 IE 上“通过”隐藏。
Try this for yourself by running the code below on IE6 or IE7. You should get a white page, but instead you will see:
通过在 IE6 或 IE7 上运行下面的代码，自己尝试一下。你应该得到一个白页，但你会看到：
alt text http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png
替代文字 http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png
Possible workaround
可能的解决方法
Since this is happening on IE and not on other browsers, I assume that this is an IE bug. One workaround is to add the following code which will override the border:
由于这是在 IE 上而不是在其他浏览器上发生的，我认为这是一个 IE 错误。一种解决方法是添加以下代码来覆盖边框：
.hide table tr td {
border: none;
}
I am wondering:
我想知道：
- Is this a known IE bug?
- Is there a more elegant solution/workaround?
- 这是一个已知的 IE 错误吗？
- 有没有更优雅的解决方案/解决方法？
The code
编码
<!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>
采纳答案by avernet
The solution I found consists in adding a top/left to move the rendering off-screen, which shields us against IE bugs of this sort. In the above example, this means that you would define the CSS for the hideclass as:
我找到的解决方案包括添加一个顶部/左侧以将渲染移出屏幕，这使我们免受此类 IE 错误的影响。在上面的示例中，这意味着您可以将hide类的 CSS 定义为：
.hide {
visibility: hidden;
position: absolute;
top: -10000px;
left: -10000px;
}
More on: Workaround for table borders showing through on IE
更多信息：在 IE 上显示表格边框的解决方法
回答by Rex the Strange
This is a IE bug. Firefox doesn't recognize "border-collapse" using "border-spacing" instead which does not cause this problem. The solution of using "display:none" works, but there's another possibility. If the visibility property is set using Javascript then the border is hidden as well (as expected).
这是一个 IE 错误。Firefox 无法使用“边框间距”识别“边框折叠”，这不会导致此问题。使用 "display:none" 的解决方案有效，但还有另一种可能性。如果使用 Javascript 设置可见性属性，则边框也会隐藏（如预期）。
回答by jthompson
If you weren't using absolute positioning, I would assume that keeping the size of the div when hidden remained the same mattered to you. However, since you are using absolute positioning, you can just use
如果您没有使用绝对定位，我会假设在隐藏时保持 div 的大小对您来说仍然很重要。但是，由于您使用的是绝对定位，因此您可以使用
display: none;
And this will accomplish the same thing (tested in IE7).
这将完成同样的事情（在 IE7 中测试）。
With visibility: hidden, the element you hide takes up the same screen space as if it were still there. When you use display: none, it's almost as if it was removed from the DOM.
使用可见性：隐藏，您隐藏的元素占用相同的屏幕空间，就好像它仍然存在一样。当您使用 display: none 时，它几乎就像是从 DOM 中删除了一样。
The original issue you're seeing could be an IE bug.
您看到的最初问题可能是 IE 错误。
回答by Xavier Young
Another possible workaround is to add "filter: alpha(opacity=100);" into the table's style.
另一种可能的解决方法是添加“filter: alpha(opacity=100);” 进入餐桌的风格。
回答by gyzpunk
Based on those different comments, I solved this issue by having this CSS class in my main CSS sheet :
基于这些不同的评论，我通过在我的主 CSS 表中包含这个 CSS 类来解决这个问题：
.hidden {
position: absolute;
visibility: hidden;
}
And those lines in a CSS sheet dedicated to IE (included through a hack on the html page) :
以及专用于 IE 的 CSS 表中的那些行（通过 html 页面上的 hack 包含）：
table.hidden, .hidden table {
visibility: hidden;
position: absolute;
border-collapse: separate;
left: -1000px;
top: -1000px;
}
That works fine for me now on IE8.
现在在 IE8 上这对我来说很好用。
Many thanks for your tips ;)
非常感谢您的提示；)
回答by buti-oxa
On your possible workaround: Since you want visibility:hidden and not display:none I assume that it is important that the table remains the same size. I am afraid that setting border to none can change that.
关于您可能的解决方法：由于您想要可见性：隐藏而不是显示：无我认为表格保持相同的大小很重要。恐怕将 border 设置为 none 可以改变这一点。
If you know you want to see white rectange, it is safer to set border color to white instead. Of course,if you have a background you want to see through the hidden table, it does not work.
如果您知道要查看白色矩形，则将边框颜色设置为白色更安全。当然，如果你有背景想看透隐藏的桌子，那是不行的。
