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

Question

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

问题

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

通过在IE6或IE7上运行以下代码,亲自尝试一下.你应该得到一个白页,但你会看到:

替代文字http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png

可能的解决方法

由于这是在IE上而不是在其他浏览器上发生的,我认为这是一个IE错误.一种解决方法是添加以下代码来覆盖边框:

.hide table tr td {
    border: none;
}

Run Code Online (Sandbox Code Playgroud)

我想知道:

这是一个已知的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

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

Answer 2

ave*_*net 4

我找到的解决方案包括添加顶部/左侧以将渲染移出屏幕，这可以保护我们免受此类 IE 错误的影响。在上面的示例中，这意味着您可以将类的 CSS 定义hide为：

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

Run Code Online (Sandbox Code Playgroud)

更多信息：在 IE 上显示表格边框的解决方法

归档时间：	17 年，1 月前
查看次数：	23373 次
最近记录：	14 年，6 月前