web-dev-qa-db-fra.com

IE CSS display: inline-block Problème de rendu

J'ai un problème de rendu avec IE Mon code est 

CSS:

div {
    display: inline-block;
    margin-right:40px;
    border: 1px solid;
}

HTML:

<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>

Voici à quoi ça ressemble dans firefox/chrome (l’affichage attendu)

enter image description here

Voici à quoi ça ressemble dans IE

enter image description here

J'ai googlé si IE prend en charge l'affichage: inline-block, et apparemment, c'est le cas.

htmlcssinternet-explorerrendering
18
AlanFoster

Ajouter DOCTYPE à votre html,

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

Cela fonctionne pour moi après que j'ai ajouté ceci.

Remarque: dans jsFiddle, DOCTYPE a été généré automatiquement afin qu’il puisse y fonctionner.

Edit 1: Vérifiez this pour plus d’informations,

Edit 2: Pour en savoir plus sur le style inline-block here

13
Selvakumar Arumugam

Solution de travail

Ce qui suit semble fonctionner correctement dans:

  • Mode de quirks
  • Normes IE 7
  • Normes IE 8
  • Normes IE 9
  • Mode de compatibilité IE 9
<!DOCTYPE html>
<html>
<head>
    <style>

    DIV {
        display: inline-block;
        *display: inline; /* leading asterisk IS correct */
        margin-right:40px;
        border: 1px solid;
        zoom: 1; /* seems to fix drawing bug on border in IE 7 */
    }

    </style>

</head>
<body>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
</body>
</html>

Historique des réponses

http://jsfiddle.net/3sK4S/

Fonctionne bien pour moi dans IE9 Standards Mode. Ne s'affiche pas correctement (comme vous l'avez décrit) en mode quirks.

Test avec IE9:

  • Mode Quirks: bloc (incorrect)
  • Normes IE 7: bloc (incorrect)
  • Normes IE 8: en ligne (correct)
  • Normes IE 9: en ligne (correct)
  • Mode de compatibilité IE 9: en ligne (correct)

Pour tromper IE7:

div {
    display: inline-block;
    *display: inline; /* leading asterisk IS correct */
    margin-right:40px;
    border: 1px solid;
}

Tiré de cet article . Fonctionne pour moi en mode d’émulation IE 7.

Par commentaire @SKS à propos de doctype, j'ai ajouté une solution complète avec un doctype spécifié.

15
Tim Medora

Pour moi travaillé en ajoutant ce code:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

aux informations d'en-tête.

5
maycza

Il y a des hacks CSS pour IE qui fonctionnent, mais il y en a plusieurs:

  1. hasLayout 

    hasLayout: true;

    --- Force apparemment le rendu IE7 (?) À suivre les règles de présentation CSS pour l'élément au lieu des règles globales

  2. * afficher 

    *display: inline;
zoom: 1;

    - Le bidouillage en étoile, qui apparemment "astuces" rend le moteur pour aligner les divs en éléments inline

  3. float 

    float:left;

    - Bon vieux float, même IE6 devrait le supporter, mais je ne sais pas pourquoi vous devriez vous inquiéter pour IE6, bien que les statistiques du navigateur chinois semblent indiquer que IE6 est toujours très populaire en Chine, mais cela pourrait déjà être de l'histoire comme je l'ai lu il quelque temps l'année dernière. Personnellement, je pense que la Corée du Nord ne devrait pas être un souci, mais ce n'est que moi.

Cependant, il semble y avoir un autre moyen d’éviter toutes ces tentatives en faveur d’un projet de code en ligne Google appelé HTML Shim, ou Shiv. Le but de l'inclure est de faire en sorte que toutes les versions de IE antérieures à la v9 prennent en charge HTML5. J'ai remarqué que cela aide et je n'ai pas à utiliser tout ce qui précède pour que le blocage en ligne fonctionne. Ceci n'est valable que si cela ne vous dérange pas d'ajouter du JavaScript. D'autre part, qui fait sans JS ces jours-ci?

Bien sûr, il y a aussi le mode quirks (compatibilité) ou les modes standard, prenez donc soin d'ajouter un doctype valide pour commencer. Pour HTML5, c'est plus simple: 

<?DOCTYPE html>

(?) Vous ne savez pas quelle version, mais je pense en avoir lu 7 en mode quirks.

3
Shubhojoy Mitra
div {
    display: block;
    margin-right: 40px;
    float: left;
    border: 1px solid;
}

Le problème concerne uniquement IE7 ou une version antérieure, mais cela résoudra le problème.

0
Rajat Singhal