IE CSS bug: table border showing div with visibility: hidden, position: absolute

Question

The issue

I have a

on a page which is initially hidden with a visibility: hidden; position: absolute. The issue is that if a

相关标签:

Answer 1

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

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

Answer 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

Answer 4

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

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

Answer 6

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