IE7 Tabellenzellen unsichtbar gemacht durch CSS nicht sichtbar durch spätere Klassenänderungen vorgenommen werden (??)

Hier sind zwei Testdateien:IE7 Tabellenzellen unsichtbar gemacht durch CSS nicht sichtbar durch spätere Klassenänderungen vorgenommen werden (??)

http://gutfullofbeer.net/good-table.html

http://gutfullofbeer.net/bad-table.html

Der Aufschlag auf diejenigen zwei Seiten sind alle fast gleich. Es gibt einen Tisch mit zwei Spalten. Die <th> und <td> Elemente einer Spalte (die zweite) haben alle die Klasse "Junk".

In der "guten" Seite, wenn Sie es laden, sehen Sie ein Kontrollkästchen deaktiviert oben. Wenn Sie das Kontrollkästchen aktivieren, sollte die zweite Spalte verschwinden. Wenn Sie es deaktivieren, kommt die zweite Spalte zurück. Auf der "Schlecht" -Seite wird das Kontrollkästchen aktiviert. Die Deaktivierung hat in IE7 keine Auswirkungen, obwohl es in anderen Browsern funktioniert, die nicht von fundamentalem Bösen beherrscht werden.

Das Kontrollkästchen ist an eine kleine JavaScript-Routine angehängt, die nur die Klasse "compact" aus dem Tag <table> hinzufügt oder entfernt. Es gibt ein Stylesheet, das dazu gehört:

table.compact th.junk, table.compact td.junk { 
    display: none; 
}

So was sollte geschehen ist, was auf der „guten“ Seite passiert. Es scheint jedoch, dass in IE7 (vielleicht 6 auch), wenn Tabellenelemente starten so, dass, wenn zunächst gerendert werden sie als unsichtbar gestylt werden, werden sie nie gesehen, unabhängig von späteren Änderungen an das DOM, das würde neue Stilregeln in Kraft setzen und sichtbar machen. (Dies scheint insbesondere ein Problem mit <table> Teilen sein, ich bin den gleichen Mechanismus an anderer Stelle mit anderen Elementen, und sie alle funktionieren.)

Also, die Frage ist: weiß jemand von einigem Hack — jedoch — empörend das kann verwendet werden, um dieses idiotische Verhalten zu umgehen? Offensichtlich könnte ich versuchen, dass IE7 seine Ansichten mit dem entsprechenden Toggle-Control-Set startet, so dass die Tabellenzellen sichtbar sind, aber in meinem Fall passiert das um eine Tabelle, die als AJAX-Antwort produziert wird, und so wäre es eine große Chaos würde ich lieber vermeiden. (Die Tabelle ist auch wirklich eine Tabelle; es ist eine Anzeige von Tabelleninformationen, kein Layout-Hack.)

Ich habe gegoogelt und nichts gefunden, was nicht überraschend sein sollte, wenn man bedenkt, wie viele Sie treffen Erhalten von "IE7-Layout-Bug" -Suchen.

Quelle

2010-06-19 Pointy

Vielleicht können Sie die Tabelle-Layout ändern, lassen Sie einen DOM/CSS Refresh auftreten, und setzen Sie es zurück ... –

@ PST, das ist meine aktuelle beste Idee - Ich kann den AJAX-geladenen Inhalt enthalten ein IE7-only-Skript-Tag, das das Steuerelement setzt, so dass alles sichtbar ist, und startet auch ein Timeout, so dass es 1/4 Sekunde später auf das zurückgesetzt wird, was es eigentlich sein soll (plus ich trigge mein Javascript-Zeug aus). Hässlich, aber es funktioniert. Ich bin nur neugierig, ob es einen seltsamen CSS-Hack gibt, um es ein bisschen weniger verrückt zu machen. Trotzdem danke! – Pointy

Ich habe nicht IE 7 installiert, aber es war das gleiche Problem mit IE 6. Hier ist, was ich tat, um es zu beheben:

$(function() { 
    $('#click').click(function() { 
    $(".compact th+th,.compact td+td").toggleClass('junk',this.checked); 
    }); 
});

Das Problem war, mit Ihnen Selektor. Das Umschalten auf compact würde keine Sichtbarkeit zu junk hinzufügen.

Quelle

2010-06-19 21:44:29

Ich glaube nicht, dass das stimmt. Auf der Seite, die * funktioniert *, ist das CSS genau das gleiche, und Sie können von sichtbar zu unsichtbar und wieder zurück wechseln, was Sie wollen. Es macht Spaß. Beginnen die Dinge jedoch so, dass der Inhalt * versteckt * ist, dann funktionieren die Dinge nicht. – Pointy

Nun, offensichtlich IE 6 und IE 7 hat einige Probleme. Anyway, Mein Code oben funktioniert in IE 6 und FF. –

Ja, ich bin sicher, du hast Recht @Gert G. – Pointy

Dies ist ein Renderfehler. IE6/7 verwendet kein ordnungsgemäßes Tabellenanzeigemodell. Leider kann ich mich nicht an einen bestimmten Namen/Label für diesen speziellen Fehler erinnern, und ich kann anscheinend keine autorisierenden Ressourcen finden, die dies bestätigen.

Zumindest habe ich 2 CSS-Möglichkeiten gefunden, dies zu beheben.

Die einfachste, verwenden visibility: hidden; statt display: none;.Leider funktioniert das nicht gut, wenn Sie mehr Spalten nach die zu toggeln Spalte haben oder einen Tabellenrand haben. Es hinterlässt immer noch ein Leerzeichen. Das Hinzufügen von position: absolute; zu .junk behebt dieses Problem in FF, aber Sie greifen auf dasselbe Renderproblem in IE zurück.

Ein Hack, der die irrtümliche Fähigkeit des IE, Stile für <col> anzuwenden, missbraucht.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(function() { 
       $('#click').click(function() { 
        $('table').toggleClass('compact', this.checked); 
       }); 
      }); 
     </script> 
     <style> 
      table.compact .junk { display: none; } 
     </style> 
     <!--[if lte IE 7]> 
     <style> 
      table.compact .junk { display: block; } 
      table.compact col.junk { display: none; } 
     </style> 
     <![endif]--> 
    </head> 
    <body> 
     <input type="checkbox" id="click" checked> 
     <table class="compact"> 
      <col /> 
      <col class="junk" /> 
      <tr> 
       <th>Hello</th> 
       <th class="junk">World</th> 
      </tr> 
      <tr> 
       <td>Foo</td> 
       <td class="junk">Bar</td> 
      </tr> 
      <tr> 
       <td>Foo</td> 
       <td class="junk">Bar</td> 
      </tr> 
     </table> 
    </body> 
</html>

Alternativ können Sie auch wechseln nur die Elemente der tatsächlichen Interesse an jQuery:

$(function() { 
    $('#click').click(function() { 
     $('table.compact .junk').toggle(!this.checked); 
    }); 
});

Quelle

2010-06-20 01:35:14 BalusC

Ich spielte ein wenig mehr mit Pointys Code und kam zu dem gleichen Ergebnis ... Ändern 'display: none;' zu 'visibility: hidden;' macht es funktioniert. Guter Beitrag (+1). –

Nun, der ganze Punkt ist, die Tischbreite unter Kontrolle zu halten, also wird "versteckt" es nicht wirklich tun. Allerdings werde ich dieses "Col" Ding definitiv versuchen; Ich habe es noch nie zuvor gesehen! Danke @BalusC !! Sie sind wie eine Art Browser ninja – Pointy

Gern geschehen. – BalusC

IE7 Tabellenzellen unsichtbar gemacht durch CSS nicht sichtbar durch spätere Klassenänderungen vorgenommen werden (??)

Antwort

Verwandte Themen