IE7 et la propriété de table CSS

StackOverflow https://stackoverflow.com/questions/249103

Question

J'adore donc le fonctionnement de mon application dans Firefox, mais je l'ouvre ensuite dans IE et ... Non, veuillez réessayer.

Le problème que je rencontre est que je règle une propriété d'affichage CSS sur none ou cellule de table avec JavaScript.

J'utilisais initialement display: block , mais Firefox le rendait bizarre sans la propriété cellule-tableau .

J'aimerais faire cela sans ajouter de piratage dans le JavaScript pour tester IE. Des suggestions?

Merci.

Était-ce utile?

La solution

Un bon moyen de résoudre ce problème en définissant la valeur display sur '' : 

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

La valeur vide provoque le retour du style à sa valeur par défaut. Cette solution fonctionne sur tous les principaux navigateurs.

Autres conseils

J'ai résolu ce problème avec jQuery: 

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

le script ci-dessus suppose que vos divs utilisent un style tel que: 

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

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

*float: left;

" * " indique IE uniquement

Eh bien, IE7 n'a pas d'affichage : table (-cell / -row) , vous devrez donc trouver quelque chose d'autre ou faire du ciblage par navigateur (ce que je conviens, c'est du mauvais bidouillage). Comme solution rapide (je ne sais pas ce que vous essayez d’obtenir, en ce qui concerne l’apparence), vous pouvez essayer display: inline-block et voir à quoi ça ressemble.

Peut-être trouvez-vous un moyen de faire afficher: bloquer et de résoudre le problème de "Firefox rendant cela bizarre" & au lieu? Pouvez-vous décrire ce que vous entendez par le rendu étrange exactement?

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

Vous pouvez regarder la solution ces gars-là sont venus avec pour gérer un affichage de type tableau dans IE.

L'utilisation de inline-block fonctionne bien pour ce type de choses. Non, IE 6 et IE 7 n'ont techniquement pas d'affichage: inline-block, mais vous pouvez répliquer le comportement avec les styles suivants: 

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

La clé de ceci est 'zoom: 1' fait basculer la propriété 'hasLayout' sur l'élément, ce qui change la façon dont le navigateur affiche un élément de niveau bloc. Le seul casse-tête avec le bloc en ligne est que vous ne pouvez pas avoir une marge inférieure à 4 pixels.

J'utilise CSS depuis plus de 10 ans et je n'ai jamais eu l'occasion d'utiliser display: table-cellule, et les seuls cas où j'utilise des commentaires conditionnels sont pour masquer les effets avancés d'IE6.

Je pense qu’une approche différente résoudrait votre problème de manière intrinsèquement multi-navigateurs. Pouvez-vous ouvrir une question distincte décrivant l’effet recherché et publier le code HTML et CSS qui fonctionne actuellement dans Firefox?

Un exemple de code pour les commentaires conditionnels que l'utilisateur n'a pas envie de paupière, merci de publier

" [if lt IE 8] " ne fonctionne que si le navigateur est IE inférieur à IE8 car IE8 le fait correctement. Avec les commentaires conditionnels, IE7 organise les DIV de manière bien horizontale ... HTML: 

 <div class="container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div>

Mon CSS 

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }

IE 8 et 9 Travaillez avec le CSS comme le fait FireFox. IE7 a maintenant le même aspect avec les fonctions Table et TD & amp; Balises TR. Sur certaines pages, IE 8 ne fonctionnait que 20% du temps, alors j’ai utilisé [if lt IE 9]

Cela permet également de résoudre les problèmes d'alignement vertical que IE7 ne peut pas gérer.

J'ai tout essayé et la seule façon pour moi de résoudre ce problème était d'utiliser Javascript / Jquery. Il s'agit d'une solution légère et propre: cliquez ici

IE7 ne prend pas en charge display: inline-block; non plus. Un hack apparent est zoom: 1; * display: inline; après votre css pour display: table-cell;

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top