IE CSS bug: table border showing div with visibili

2019-02-13 04:46发布

站内文章 / HTML/CSS
63 0 0

问题:

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: collapse and has a border set on it cells, that border still shows "through" the hidden <div> on 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:

alt text 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:

.hide table tr td {
    border: none;
}

I am wondering:

  • Is this a known IE bug?
  • Is there a more elegant solution/workaround?

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>

回答1:

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).



回答2:

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

display: none;

And this will accomplish the same thing (tested in 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.

The original issue you're seeing could be an IE bug.



回答3:

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 hide class as:

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

More on: Workaround for table borders showing through on IE



回答4:

Another possible workaround is to add "filter: alpha(opacity=100);" into the table's style.



回答5:

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.

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.



回答6:

Based on those different comments, I solved this issue by having this CSS class in my main CSS sheet :

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

And those lines in a CSS sheet dedicated to IE (included through a hack on the html page) :

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

That works fine for me now on IE8.

Many thanks for your tips ;)



标签： css internet-explorer
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~