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

前端之家收集整理的这篇文章主要介绍了IE CSS bug:表格边框显示带可见性的div:hidden,position:absolute前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题

我有一个< div>在最初以可见性隐藏的页面上:隐藏;位置:绝对.问题是,如果< div>隐藏这种方式包含一个使用border-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设置visibility属性,则边框也会被隐藏(如预期的那样).
原文链接:https://www.f2er.com/css/215931.html

猜你在找的CSS相关文章