Problème avec la table dans IE8/IE9

Donc, notre site a été conçu sans doctype, et j'essaie de le mettre à jour afin qu'il ne force pas IE en mode quirks.
Le problème est qu'il y a quelques tables qui utilisaient des images de coin arrondies car les devs ne comprenaient pas comment utiliser une conception basée sur div. Cela semble normal en mode quirks et même en mode IE7, mais quand j'utilise le mode standard IE8 ou IE9, certaines lignes de la table finissent par être plus grandes qu'elles ne devraient (à savoir les lignes contenant les images de coin arrondies) et aucune la hauteur forcée semble fonctionner. Y a-t-il une méthode d'affichage de table de base qui me manque? Cela semble bien dans tous les navigateurs sauf IE8 et IE9, ce qui me déroute. J'ai copié le code (avec des liens d'image qualifiés) à jsbin, et vous pouvez la voir ici:
http://jsbin.com/ofedet/Problème avec la table dans IE8/IE9

Je sais la meilleure méthode est d'aller de l'avant et les remplacer par divs ou un autre élément sémantique border-radius, mais pour le moment, j'espérais juste régler ces problèmes pour éviter le désastre jusqu'à ce que je puisse les convaincre du retour sur investissement d'une refonte.

Source

2011-10-12 NateDSaint

Une capture d'écran de la façon dont il est censé ressembler serait utile. –

+1 pour faire l'effort de réparer un site pour l'arrêter en utilisant quirksmode! – Spudley

Il semble que le problème soit résolu, mais la façon dont il est censé regarder est à quoi il ressemble dans tous les autres navigateurs de l'aperçu jsbin. – NateDSaint

Laissez ces images flotter.

#Table_01 img { 
    float: left; 
}

Source

2011-10-12 15:52:44 BalusC

Cela a vraiment fonctionné, mais j'aimerais que vous puissiez expliquer pourquoi. – NateDSaint

En mode non strict, les images sont par défaut des éléments [block] (http://htmlhelp.com/reference/html40/block.html). En mode strict, les images sont par défaut [inline] (http://htmlhelp.com/reference/html40/inline.html) éléments (et se situent donc sur la même ligne de base que les caractères, ce qui les fait paraître plus "élevés" que prévu, laissant un rembourrage inférieur effrayant). Vous pouvez aussi le faire 'display: block;' de sorte que le comportement non-strict soit simulé, mais le fait de les flotter est meilleur quand vous voulez vraiment être strict. – BalusC

Gotcha. Je pensais que cela avait à voir avec un problème de mode d'affichage entre les deux, mais mon hypothèse était que cela menti dans la table et non le contenu de la table. Merci! – NateDSaint

Essayez d'ajouter ce CSS:

#Table_01 a img { border:0; margin:0; padding:0; }

Source

2011-10-12 15:56:05 joshmax

cela n'a pas fonctionné sur mon cas de test – NateDSaint

Désolé à ce sujet, c'était une théorie: ma barre d'outils IE Dev m'a échappé pour que je ne puisse pas l'essayer. Heureux de voir que ça fonctionne bien. – joshmax

hehe même chose est arrivé avec moi en essayant de le tester, c'est pourquoi je l'ai finalement jeté sur jsbin afin que les gens puissent pirater là. Merci pour votre offre d'aide si! – NateDSaint

Problème avec la table dans IE8/IE9

Répondre

Questions connexes