Question

问题

我在页面上有<div>，最初隐藏了visibility: hidden; position: absolute。问题是，如果以这种方式隐藏的<div>包含一个使用border-collapse: collapse并且在其上设置了边框的表，则该边框仍会在IE上显示“通过”隐藏的<div>。

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

Answer 1

这是一个IE错误。 Firefox无法使用“border-spacing”识别“border-collapse”，而不会导致此问题。使用“display：none”的解决方案有效，但还有另一种可能性。如果使用Javascript设置visibility属性，则边框也会被隐藏（如预期的那样）。

Answer 2

如果你没有使用绝对定位，我会假设隐藏div的大小对你来说仍然是重要的。但是，由于您使用的是绝对定位，因此可以使用

display: none;

这将完成同样的事情（在IE7中测试）。

随着可见性：隐藏，您隐藏的元素占用相同的屏幕空间，就像它仍然存在一样。当你使用display：none时，它几乎就像从DOM中删除了一样。

您看到的原始问题可能是IE错误。

Answer 3

我找到的解决方案包括添加一个顶部/左侧来移动屏幕外的渲染，这可以保护我们免受此类IE漏洞的攻击。在上面的示例中，这意味着您将hide类的CSS定义为：

.hide {
    visibility: hidden;
    position: absolute;
    top: -10000px;
    left: -10000px;
}

更多信息：Workaround for table borders showing through on IE

Answer 4

另一种可能的解决方法是添加“filter：alpha（opacity = 100）;”进入桌子的风格。

Answer 5

关于您可能的解决方法：因为您需要visibility：hidden而不是display：none我认为表格保持相同的大小非常重要。我担心将边界设置为无可以改变它。

如果您知道要查看白色矩形，则将边框颜色设置为白色会更安全。当然，如果你有一个背景，你想看透隐藏的表，它不起作用。

Answer 6

基于这些不同的评论，我通过在我的主CSS表格中使用这个CSS类解决了这个问题：

.hidden {
    position: absolute;
    visibility: hidden;
}

专用于IE的CSS表格中的那些行（通过html页面上的黑客包含）：

table.hidden, .hidden table {
    visibility: hidden;
    position: absolute;
    border-collapse: separate;
    left: -1000px;
    top: -1000px;
}

现在在IE8上我的工作正常。

非常感谢您的提示;）

IE CSS bug：表格边框显示带可见性的div：hidden，position：absolute

问题

可能的解决方法

代码

6 个答案: