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
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:
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:
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).
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.
Eine andere mögliche Lösung ist das Hinzufügen von "filter: alpha (opacity = 100);" in den Stil der Tabelle.
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.
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;)
Tags und Links internet-explorer css