web-dev-qa-db-fra.com

IE7 et la propriété de table CSS

Donc, j'adore quand mon application fonctionne parfaitement 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 table-cell avec JavaScript.

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

J'aimerais faire cela sans ajouter un hack dans le JavaScript pour tester IE. Aucune suggestion?

Merci.

csscross-browserinternet-explorer-7css-tables
32
Ryan Smith

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

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

31
Jacco

J'ai résolu ceci en utilisant 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 vous avez des divs utilisant un style tel que:

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

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

*float: left;

"*" indique seulement IE

9
Jonathan Hendler

Eh bien, IE7 n’a pas display: table(-cell/-row) vous devrez donc trouver quelque chose d’autre ou faire du ciblage par navigateur (ce que j’accepte, c’est un 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 il ressemble.

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

4
joelhardi

Utiliser inline-block fonctionne bien pour ce type de choses. Non, techniquement IE 6 et IE 7 n'ont 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' bascule la propriété 'hasLayout' sur l'élément qui change la façon dont le navigateur affiche un élément de niveau bloc. Le seul casse-tête avec bloc en ligne est que vous ne pouvez pas avoir une marge inférieure à 4px.

4
risingfish

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

Vous pouvez regarder la solution ces gars-là est venue avec pour gérer un affichage semblable à une table dans IE.

4
eyelidlessness

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

Je soupçonne 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?

3
Herb Caudill

Un exemple de code pour les commentaires conditionnels que l'utilisateur paupière, aimablement posté

"[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 balises Table et TD & TR. Sur certaines pages IE 8 ne fonctionnait que 20% du temps, alors j’ai utilisé [if lt IE 9]

Cela aide également à résoudre les problèmes d’alignement vertical que IE7 ne peut pas gérer.

1
stack collision with heap

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

0
Phill Healey

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

0
Mike6679