IE CSS-Fehler: Tabellengrenze mit div mit Sichtbarkeit: Versteckt, Position: absolut

8

Das Problem

Ich habe <div> auf einer Seite, die anfänglich mit visibility: hidden; position: absolute ausgeblendet ist. Das Problem besteht darin, dass, wenn eine <div> , die auf diese Weise versteckt ist, eine Tabelle enthält, die border-collapse: collapse verwendet und ein Rahmen für sie definiert ist, dieser Rahmen immer noch "durch" die versteckte <div> für IE zeigt.

Versuchen Sie es selbst, indem Sie den folgenden Code auf IE6 oder IE7 ausführen. Sie sollten eine weiße Seite bekommen, aber stattdessen sehen Sie:

Alternativtext http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png

Mögliche Abhilfe

Da dies im Internet Explorer und nicht in anderen Browsern passiert, gehe ich davon aus, dass dies ein IE-Fehler ist. Eine Problemumgehung besteht darin, den folgenden Code hinzuzufügen, der den Rahmen überschreibt:

%Vor%

Ich frage mich:

  • Ist das ein bekannter IE-Fehler?
  • Gibt es eine elegantere Lösung / Workaround?

Der Code

%Vor%     
avernet 10.01.2009, 03:08
quelle

6 Antworten

2

Die Lösung, die ich gefunden habe, besteht darin, einen oberen / linken Rand hinzuzufügen, um das Rendering außerhalb des Bildschirms zu verschieben, was uns gegen IE-Bugs dieser Art abschirmt. Im obigen Beispiel bedeutet dies, dass Sie das CSS für die Klasse hide wie folgt definieren würden:

%Vor%

Mehr zu: Workaround für Tabellenrahmen Durchschauen auf IE

    
avernet 11.11.2009, 05:25
quelle
5

Dies ist ein IE-Fehler. Firefox erkennt "border-collapse" nicht mit "border-spacing", was dieses Problem nicht verursacht. Die Lösung, "display: none" zu verwenden, funktioniert, aber es gibt noch eine andere Möglichkeit. Wenn die Visibility-Eigenschaft mit Javascript gesetzt wird, wird der Rahmen ebenfalls ausgeblendet (wie erwartet).

    
Rex the Strange 04.02.2010 16:15
quelle
2

Wenn Sie keine absolute Positionierung verwenden würden, würde ich annehmen, dass die Größe des Divs, wenn es verborgen bleibt, für Sie gleich bleibt. Da Sie jedoch die absolute Positionierung verwenden, können Sie einfach

verwenden %Vor%

Und das wird dasselbe erreichen (getestet in IE7).

Mit visibility: hidden nimmt das ausgeblendete Element denselben Bildschirmplatz ein, als wäre es immer noch dort. Wenn Sie display: none verwenden, ist es fast so, als wäre es aus dem DOM entfernt worden.

Das ursprüngliche Problem, das Sie sehen, könnte ein IE-Fehler sein.

    
jthompson 25.03.2009 06:25
quelle
2

Eine andere mögliche Lösung ist das Hinzufügen von "filter: alpha (opacity = 100);" in den Stil der Tabelle.

    
Xavier Young 08.06.2011 11:10
quelle
0

Zu Ihrer möglichen Problemumgehung: Da Sie Sichtbarkeit wünschen: versteckt und nicht anzeigen: keine Ich nehme an, dass es wichtig ist, dass die Tabelle die gleiche Größe behält. Ich fürchte, dass die Grenze zu niemandem das ändern kann.

Wenn Sie wissen, dass Sie weiße Rechtecke sehen möchten, ist es sicherer, die Rahmenfarbe stattdessen auf weiß zu setzen. Wenn Sie einen Hintergrund haben, den Sie durch die verborgene Tabelle sehen möchten, funktioniert es natürlich nicht.

    
buti-oxa 10.01.2009 07:24
quelle
0

Basierend auf diesen verschiedenen Kommentaren habe ich dieses Problem gelöst, indem ich diese CSS-Klasse in meinem CSS-Hauptblatt habe:

%Vor%

Und diese Zeilen in einem CSS-Sheet für IE (enthalten durch einen Hack auf der HTML-Seite):

%Vor%

Das funktioniert jetzt für mich auf IE8.

Vielen Dank für Ihre Tipps;)

    
gyzpunk 09.08.2011 16:14
quelle

Tags und Links