web-dev-qa-db-fra.com

internet Explorer 8 ignore la largeur de l'élément 'display: table-cell'

Selon le mode quirks , Internet Explorer 8 prend en charge les options de table pour les propriétés d'affichage, mais dans cet exemple, il présente un comportement très étrange.
http://jsfiddle.net/e3cUn/3/

Dans un navigateur normal, l'image interne sera redimensionnée pour s'adapter à la boîte 150x150 sans modifier le rapport de dimension (étirement).

alt text

Mais dans IE8, la zone extérieure (la zone bleue) s’étire également:
alt text

1) Avez-vous vu quelque chose comme ça? Cela semble être lié à text-align:center: la suppression de cette propriété corrige le problème, mais je dois centrer l'image (dans les navigateurs autres que les navigateurs, au moins).

2) Si cela ne peut pas être corrigé correctement, comment puis-je fournir une valeur display spéciale pour IE? J'ai vu quelques exemples sur le Web, tels que #display: block;, mais tous fonctionnent uniquement avec IE7.

edit Je connais <!--[if IE 8]> et des commandes similaires à mettre en HTML, mais je cherchais en fait un moyen de le faire dans un fichier css. Quelque chose comme ça

    display: table-cell;
    #display: block;

La deuxième ligne n'est pas un commentaire, elle remplace la valeur précédente pour ie7 et en dessous. (mais pas ie8)

Merci!

htmlcssinternet-explorerinternet-explorer-8
16
Nikita Rybak

Après avoir ajouté la prime, j'ai finalement résolu ce problème en ciblant mon CSS sur IE8. J'utilisais déjà la technique de Paul Irish consistant à ajouter des classes à l'élément <html> à l'aide de commentaires conditionnels:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Il ne me restait donc plus qu'à ajouter une règle CSS supplémentaire pour IE 8 et versions antérieures:

.img-container { display: table-cell; }   /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */

Couplé aux techniques de centrage vertical des images , cela me donne une belle solution multi-navigateurs.

19
Andy E

Utilisez width au lieu de max-width car dans ie8, la largeur réelle de l'image sera prise pour la table. Vérifiez ceci Fiddle .

Réorganiser les CSS:

.root img {
    width: 130px;
    max-height: 130px;   
}

Mise à jour

CSS:

.root span {
    width:130px;
    overflow:hidden;
    display:inline-block;
}
.root img {
    max-width: 130px;
    max-height: 130px;
}

HTML:

<div class="root">
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png  /></span>
</div>
12
Sanooj

Cela semble aider si le conteneur parent d'un élément display:table-cell a un attribut display:table (et un table-layout:fixed), voir cet exemple et cette question connexe .

4
0x4a6f4672

  1. Si text-align: center ne fonctionne pas, vous pouvez plutôt essayer ce qui suit (sauf si vous avez des raisons d'utiliser la disposition du tableau). C'est généralement la méthode privilégiée pour centrer tout élément de disposition de bloc. L'utilisation du centre d'alignement de texte est une solution de secours lorsque cela est nécessaire, mais elle est moins fiable: vous ne pouvez pas l'utiliser pour les div imbriquées, etc.

    img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

  2. Si vous devez effectuer un remplacement personnalisé pour IE, le moyen le plus simple consiste à utiliser une feuille de style externe et à fournir les informations suivantes dans votre section <head>:

    <!--[if lte IE 8]>
   <link type='text/css' rel='stylesheet' src='link-to-your-source'/>
<[endif]-->

    Fournissez cette feuille de style en dessous de la feuille de papier ordinaire et elle devrait l’écraser. Si tel est le cas, vous pouvez toujours fournir des balises !important à la fin des instructions que vous devez remplacer (bien qu'il soit toujours préférable d'éviter cela sauf en cas d'absolue nécessité, car cela gâche l'héritage des éléments enfants et vous devez vous en souvenir constamment.) ). Par exemple:

    .root img {
    text-align: left !important;
    ...
}
2
Chris Krycho

avez-vous une balise doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

J'ai eu un même problème une fois avec IE, qui a résolu le problème.

Bonne chance

0
Sebastjan