IE7 et la propriété table-cell CSS

Question

Alors j'adore quand mon application fonctionne parfaitement sur Firefox, mais quand je l'ouvre sur IE et... Non, veuillez réessayer.

Le problème que je rencontre est que je définis une propriété d'affichage CSS soit à none, soit à table-cell avec JavaScript.

Au début, j'utilisais display: block, mais Firefox le rendait bizarrement sans la propriété table-cell.

J'aimerais pouvoir le faire sans ajouter de bidouille en JavaScript pour tester sur IE. Des suggestions ?

Merci.

Answer 1

J'ai résolu cela en utilisant jQuery :

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("");
    $(".tablerow").wrap("");
    $(".table").wrapInner("");
  }
});
le script ci-dessus suppose que vous avez des divs utilisant des styles tels que :
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }

Answer 2

Une bonne façon de résoudre cela est de définir la valeur display sur '':

<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->

La valeur vide permet au style de revenir à sa valeur par défaut. Cette solution fonctionne sur tous les principaux navigateurs.

Answer 3

J'ai eu le même problème et j'ai utilisé

*float: left; 

"*" indique que c'est uniquement pour IE

Answer 4

Bien, IE7 n'a pas display: table(-cell/-row), donc vous devrez trouver autre chose ou faire du ciblage de navigateur (ce que je trouve être une mauvaise astuce). Comme solution rapide (je ne sais pas ce que vous essayez d'atteindre, en termes d'apparence), vous pourriez essayer display: inline-block et voir à quoi cela ressemble.

Peut-être trouver un moyen de faire display: block et résoudre le problème du "rendu bizarre sous Firefox" à la place? Pouvez-vous décrire exactement ce que vous voulez dire par "rendu bizarre"?

Answer 5

Vous n'avez jamais besoin de Javascript pour tester IE, utilisez les commentaires conditionnels.

Vous pouvez jeter un œil à la solution que ces gens ont trouvée pour gérer l'affichage de type tableau dans IE.