[Résolu] Problème de width avec Internet Explorer

Bonjour,

Je travaille sur 3 navigateurs, chrome, mozilla et internet explorer.

Je définis dans mon fichier css la taille de l'élément

.element{
width:49%;
display:inline-block;
}

Sur chrome et mozilla, le contenu s'affiche correct, les éléments sont bien en display-block, par contre su IE les éléments sont en block.
J'ai cherché, j'ai pas trouvé la cause. Finalement, j'ai utilisé la règle et j'ai mesuré en cm la taille des élements,
-sur chrome et mozilla : 5cm;
-sur IE : 7.5cm;

La taille est augmenté sur internet explorer par rapport aux autres navigateurs, et c'est pour cela que les élements décendent en block car la largeur de l'écran ne suffit pas.

Quelqu'un aurait il une idée de comment je pourrais régler ce problème de largeur?

Merci et bonne journée
Modifié par nancyAlex (26 Nov 2014 - 08:27)

Bonjour,

Déjà, mieux que la règle : les outils de développement. Dans ces trois navigateurs le raccourci est le même : F12. Ils te permettent tous de consulter la taille exacte de l’élément, en séparent les dimensions, les marges internes et externes, et les bordures internes et externes.

Ensuite, d’après ce que tu décris, il n’y a aucune raison qu’IE fasse différemment des autres. Quelques questions de plus pour préciser un peu :
- quelle version d’IE ?
- le CSS exact (copié/collé) et le HTML correspondant ?

Avec les indices que tu donnes, je pencherais pour le passage en mode Quirks de IE (mais ça dépend de la version que tu utilises).

Ça ressemble soit à une erreur de code (CSS ou HTML, voire les deux) soit à un problème de box-sizing classique - mais il nous faudra plus d’indices pour le découvrir

Merci pour ta réponse,

Effectivement, je fais 'inspecter élement' et les styles sont pareils pour les navigateurs mais l'affichage est différent (visuellement).

Version IE : IE 11.

Code

<div id="content">
<ul class="content_1">
<li>Bloc 1</li>
<li>Bloc 2</li>
<li>Bloc 3</li>
<li>Bloc 4</li>
</ul>
</div>

CSS

div#content{
min-height: 360px;
width: 100%;
margin: 0 auto;
}

ul.content_1{
margin: 5px 0;
}

ul.content_1 > li{
border-bottom: 1px solid #DCDCDC;
background-color: rgba(220,220,220,0.2);
border: 1px solid #CDD;
margin-bottom: 11px;
padding: 1%;
border-radius: 8px;
width: 49%;
display: inline-block;
margin-right: 1%;
-webkit-box-sizing: border-box;
}

Bonjour.

Ton -webkit-box-sizing: border-box; ne s'applique - volontairement ou non - qu'aux navigateurs sous Webkit (Chrome, Safari, Android, Opera).

Il n'est donc ni appliqué sur IE ni sur Firefox.

Je pense que le mieux serait de l'appliquer partout en rajoutant la règle standard : box-sizing: border-box;

le truc il marche correct dès que j'ai rajouté le box-sizing: border-box; de Raphael.

Et bahh, il est temps pour moi de faire quelques recherches sur le sujet je pense. J'ai même pas pensé à ça!!

En tout cas, MERCI BEAUCOUP les gars.