IE CSS bug: les bordures du tableau montrant div avec visibility: hidden, position: absolute

La question

J'ai un <div> sur une page qui n'est initialement masqué avec un visibility: hidden; position: absolute. Le problème est que si un <div> cachés de cette façon, contient une table qui utilise border-collapse: collapse et a une frontière définie sur les cellules, que la frontière affiche toujours "à travers" l'caché <div> sur IE.

Essayez vous-même en exécutant le code ci-dessous sur IE6 ou IE7. Vous devriez obtenir une page blanche, mais au lieu de cela, vous verrez:

le texte d'alt http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png

Solution de contournement Possible

Depuis ce qui se passe sur IE et pas sur les autres navigateurs, je suppose que c'est un IE bug. Une solution consiste à ajouter le code suivant qui remplacera la frontière:

.hide table tr td {
    border: none;
}

Je me demande:

Est-ce un connu IE bug?
Est-il une solution plus élégante/solution de contournement?

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

OriginalL'auteur avernet | 2009-01-10

css internet-explorer

5

C'est un IE bug. Firefox ne reconnaît pas "border-collapse" à l'aide "border-spacing" à la place qui ne provoque pas ce problème. La solution de l'utilisation de "display:none" œuvres", mais il y a une autre possibilité. Si la visibilité de la propriété est définie à l'aide de Javascript puis la frontière est caché (comme prévu).

Pourquoi est-ce qu'il n'a pas vraiment caché lors de l'utilisation d'une feuille de style, mais il le fait lorsque vous définissez le style à l'aide de Javascript?
Firefox ne prend pas en charge border-collapse? Bien sûr, il n' (en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29); vous devez dire quelque chose d'autre. Vous suggérez qu'une solution de contournement pour utiliser border-spacing au lieu de cela, mais comment le code? Hésitez pas à fourche ce jsFiddle pour tester: jsfiddle.net/avernet/BYgZf.

OriginalL'auteur Rex the Strange
2

Si vous n'avez pas à utiliser le positionnement absolu, je suppose que le maintien de la taille de la div caché est resté le même qui était important pour vous. Cependant, puisque vous êtes à l'aide de positionnement absolu, vous pouvez simplement utiliser
```
display: none;
```
Et cela permettra de faire la même chose (testé IE7).

Avec visibility: hidden, l'élément vous cacher, occupe le même espace à l'écran comme si elle était encore là. Lorsque vous utilisez display: none, c'est presque comme si elle a été retirée de la DOM.

Le problème d'origine que vous voyez peut être un IE bug.

OriginalL'auteur jthompson
2

La solution que j'ai trouvé consiste en l'ajout d'un haut/gauche pour déplacer le rendu hors de l'écran, qui nous protège contre IE bugs de ce genre. Dans l'exemple ci-dessus, cela signifie que vous définiriez le CSS pour le hide classe:
```
.hide {
    visibility: hidden;
    position: absolute;
    top: -10000px;
    left: -10000px;
}
```
Plus sur: Solution de contournement pour les bordures du tableau sur IE

OriginalL'auteur avernet
2

Une autre solution possible est d'ajouter "filter: alpha(opacity=100);" dans le tableau du style.

Merci beaucoup, cette correction d'un problème lié j'ai eu avec un iframe en laissant un fantôme c'est à dire quand le div contenant éteint visibilité.

OriginalL'auteur Xavier Young
0

Sur votre solution de contournement possible: Puisque vous voulez visibility:hidden et pas display:none je suppose qu'il est important que la table reste de la même taille. J'ai peur que l'établissement de la frontière à la personne ne peut changer cela.

Si vous savez que vous voulez voir blanc rectange, il est plus sûr pour définir la couleur de la bordure du blanc à la place. Bien sûr,si vous avez un arrière-plan que vous voulez voir à travers la table masquée, il ne fonctionne pas.

Dans ce cas, définissez la couleur de la bordure de transparent.

OriginalL'auteur buti-oxa
0

Basé sur ces différents commentaires, j'ai résolu ce problème en ayant cette classe CSS dans mon CSS principale de la feuille :
```
.hidden {
    position: absolute;
    visibility: hidden;
}
```
Et ces lignes dans une feuille CSS dédié à IE (inclus via un hack sur la page html) :
```
table.hidden, .hidden table {
    visibility: hidden;
    position: absolute;
    border-collapse: separate;
    left: -1000px;
    top: -1000px;
}
```
Qui fonctionne très bien pour moi maintenant sur IE8.

Merci beaucoup pour vos conseils 😉

OriginalL'auteur gyzpunk

Vous devez vous connecter pour publier un commentaire.