IE CSS bug: table border zeigt div mit visibility: hidden, position: absolute

Das Problem

Ich habe eine <div> auf einer Seite, die zunächst verborgen, mit einem visibility: hidden; position: absolute. Das Problem ist, dass wenn ein <div> versteckt diese Weise enthält eine Tabelle, die verwendet border-collapse: collapse und hat eine Grenze gesetzt, die auf es-Zellen, die die Grenze zeigt immer noch "durch" die verborgene <div> auf IE.

Versuchen, diese für sich selbst durch ausführen des Codes unten auf IE6 oder IE7. Sie sollte eine weiße Seite erhalten, sondern Sie werden sehen:

alt-text http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png

Mögliche Problemumgehung

Da dies geschieht auf IE und nicht auf anderen Browsern, ich nehme an, dies ist ein IE-bug. Eine Problemumgehung besteht darin, den folgenden code hinzufügen, die das überschreiben der Grenze:

.hide table tr td {
    border: none;
}

Frage ich mich:

  • Ist dies ein bekannter IE-bug?
  • Gibt es eine elegantere Lösung/workaround?

Den 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>
InformationsquelleAutor avernet | 2009-01-10
  1. 5

    Dies ist ein IE-bug. Firefox nicht erkennen "border-collapse" mit "border-spacing" statt, die nicht dieses problem verursachen. Die Lösung für die Verwendung von "display:none" funktioniert, aber es gibt noch eine Möglichkeit. Wenn die visibility-Eigenschaft wird mit Javascript dann die Grenze ist auch versteckt (wie erwartet).

    • Warum ist es, dass es nicht richtig machen, werden ausgeblendet, wenn über ein stylesheet, aber es funktioniert, wenn du den Stil mit Javascript?
    • Firefox unterstützt nicht border-collapse? Natürlich, es macht (en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29); Sie müssen etwas anderes meinen. Sie schlagen vor, wie eine Problemumgehung zu verwenden border-spacing statt, aber wie würde der code Aussehen? Fühlen Sie sich frei, um die Gabel dieses jsFiddle zum testen: jsfiddle.net/avernet/BYgZf.
    InformationsquelleAutor Rex the Strange
  2. 3

    Wenn du nicht mit absoluter Positionierung, würde ich davon ausgehen, dass die Größe des div-wenn Sie versteckt sind die gleichen geblieben, zählte zu Ihnen. Jedoch, da Sie über die absolute Positionierung, können Sie einfach

    display: none;

    Und dies wird bewirken das gleiche (getestet in IE7).

    Mit visibility: hidden, die ein element, das Sie ausblenden, nimmt den gleichen Platz auf dem Bildschirm, als ob es immer noch da waren. Wenn Sie display: none, es ist fast so, als wenn es aus dem DOM entfernt.

    Die original-Ausgabe, die Sie sehen, könnte ein IE-bug.

    InformationsquelleAutor jthompson
Schreibe einen Kommentar