cellules de table IE7 rendus invisibles par CSS ne peuvent pas être rendus visibles par la suite des changements de classe (??)

Voici deux fichiers de test:cellules de table IE7 rendus invisibles par CSS ne peuvent pas être rendus visibles par la suite des changements de classe (??)

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

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

Le balisage sur les deux pages est presque la même chose. Il y a une table avec deux colonnes. Les éléments <th> et <td> d'une colonne (la seconde) sont tous classés dans la catégorie "ordure".

Dans la page "bonne", lorsque vous le chargez, une case à cocher n'est pas cochée en haut. Si vous cochez la case, la deuxième colonne devrait disparaître. Si vous décochez la case, la deuxième colonne revient. Dans la page "Mauvais", la case à cocher commence cochée. Décocher n'a aucun effet dans IE7, bien qu'il fonctionne dans d'autres navigateurs qui ne sont pas possédés par le mal fondamental.

La case à cocher est liée à une petite routine Javascript qui ajoute ou supprime la classe "compact" de la balise <table>. Il y a une feuille de style qui comprend ceci:

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

Ainsi, ce devrait se produire est ce qui se passe sur la page « bonne ». Cependant, il semble que dans IE7 (peut-être 6 aussi) si les éléments de table commencent de sorte que lorsque initialement rendus qu'ils sont conçus pour être invisibles, ils ne seront jamais vu, indépendamment des changements ultérieurs dans le DOM qui serait apporter de nouvelles règles de style et les laisser visibles. (Cela semble être un problème avec <table> parties en particulier, je suis en utilisant le même mécanisme ailleurs avec d'autres éléments et ils ont tous fonctionnent très bien.)

Ainsi, la question est: Quelqu'un sait-il de quelque bidouille — révoltant cependant — qui peut être utilisé pour contourner ce comportement idiot? Évidemment, je pourrais essayer de faire en sorte qu'IE7 démarre ses vues avec l'ensemble de contrôle à bascule approprié pour que les cellules du tableau soient visibles, mais dans mon cas cela se produit autour d'une table qui est produite comme une réponse AJAX, et donc désordre je préfère éviter. (La table est aussi une table, c'est un affichage d'informations tabulaires, pas un hack de mise en page.)

J'ai fait des recherches sur google et je n'ai rien trouvé, ce qui ne devrait pas être surprenant si l'on considère le nombre de hits obtenir à partir de "IE7 mise en page bug" recherches.

Source

2010-06-19 Pointy

Peut-être que vous pouvez changer la table de mise en page, laissez un DOM/CSS rafraîchir se produire, et le remettre ... –

@pst c'est ma meilleure idée actuelle - Je peux avoir le contenu chargé AJAX inclure une balise de script IE7 seulement qui définit le contrôle de telle sorte que tout est visible, et lance également un délai d'attente de sorte que 1/4 seconde plus tard, il se réinitialise à ce qu'il est censé être (plus je déclenche mes trucs Javascript). Laid mais ça marche. Je suis juste curieux de savoir s'il y a quelque bidouille CSS bizarre pour le rendre un peu moins fou. Merci quand même! – Pointy

Je n'ai pas IE 7 est installé, mais il était le même problème avec IE 6. Voici ce que je l'ai fait pour y remédier:

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

Le problème était avec vous sélecteur. Le fait de basculer sur compact n'ajouterait pas de visibilité à junk.

Source

2010-06-19 21:44:29

Je ne pense pas que ce soit vrai. Dans la page qui fonctionne *, le CSS est exactement le même, et vous pouvez basculer du visible à l'invisible et vice versa tout ce que vous aimez. C'est amusant. Cependant, lorsque les choses démarrent de telle sorte que le contenu est * masqué *, les choses ne fonctionnent pas. – Pointy

Bien, évidemment IE 6 et IE 7 a quelques problèmes. Quoi qu'il en soit, mon code ci-dessus fonctionne dans IE 6 et FF. –

Oui, je suis sûr que vous avez raison @Gert G. – Pointy

Il s'agit d'un bogue de rendu. IE6/7 n'utilise pas un modèle d'affichage de table approprié. Malheureusement, je ne peux pas me souvenir d'un nom/label spécifique pour ce bogue particulier et je n'arrive pas à trouver des ressources autorisées confirmant cela.

Au moins, j'ai trouvé 2 moyens CSS pour résoudre ce problème.

Le plus simple, utilisez visibility: hidden; au lieu de display: none;.Malheureusement cela ne fonctionne pas bien si vous avez plus de colonnes après la colonne à basculer ou avoir une bordure de table. Il laisse toujours un espace. Ajout de position: absolute; à .junk résout ce problème dans FF, mais vous revenez au même problème de rendu dans Internet Explorer.

Un hack qui abuse de la capacité erronée de l'IE à appliquer des styles pour <col>.

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

Vous pouvez aussi simplement basculer les éléments de réelle intérêt jQuery:

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

Source

2010-06-20 01:35:14 BalusC

J'ai joué un peu plus avec le code de Pointy et suis arrivé à la même conclusion ... changer 'display: none;' à 'visibility: hidden;' ça marche. Bon message (+1). –

Eh bien, le but est de garder la largeur de la table sous contrôle, donc "caché" ne le fera pas vraiment. Cependant, je vais certainement essayer cette chose "col"; Je ne l'ai jamais vu auparavant! Merci @BalusC !! Vous êtes comme une sorte de navigateur ninja – Pointy

De rien. – BalusC

cellules de table IE7 rendus invisibles par CSS ne peuvent pas être rendus visibles par la suite des changements de classe (??)

Répondre

Questions connexes