Rendre compatible son site sous IE

Par didouchy, il y a 13 ans

Les bases HTML/CSS

Salut tous le monde,

Je suis sur la création d'un nouveau thème extensible pour mon site depuis quelques semaines et je rencontre pas mal de déformation quand je me rend sur IE ( 8 et 9 ). Celui-ci s'affiche à la perfection sur FireFox, chrome, opéra mais certaine élément comme le header, la disposition du menu et le footer son décalé.

Voici le screen sous google chrome (identique sous FireFox et opéra) :

Et sous IE:

J'utilise html5 et le css3 avec certaine fonction reset du css dont la liste est la suivante:

/* RESET */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration:none; color: #797979;}
a:hover, a:active {outline: none; color:#BD8D46;}
ul {list-style: none;}
img { border: 0;}
h1, h2, h3, h4, h5, h6 { margin: 0;}
.clearfix::after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

De plus, les effet de text-shadow sous IE ne sont pas prit en compte comme sur google chrome. J'ai été faire un tour sur google pour en savoir plus et j'ai vue qu'alsacreation propose un topic justement pour rendre compatible son site sous IE avec PIE mais je n'y comprend absolument rien.

Merci pour vote aide.

5 réponses

BenFarhat, il y a 13 ans

En deux mots!
Modernizr & html5shim
Modernizr permet d'utiliser CSS3 et HTML5 sur des browsers anciens et également sur des jeux tels que tetris, solitaire ou internet explorer :)
html5shim consiste juste à mettre au niveau de ton entête:

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

et cet article à lire: http://blog.bastienpenalba.fr/les-outils-essentiels-pour-developper-un-site-en-html5/

Sinon si tu as un lien vers ton site pour que je puisse te dire quoi rajouter ou changer dans ton CSS

Une suggestion de ma part c'est si tu n'as pas mis ton site en ligne, passer par une système de grille tel que 960gs, ou carrément bootstrap ou Kube!
qui ont l'avantage d'être déja compatible avec tous les navigateurs, toi tu as juste a respecter les conventions et y greffer ton site!
je penses que c'est plus propres, rapides, claire en plus le système sur lequel tu mettras ton site seras mis à jour ou auras de nouvelle fonctionnalité, de ton coté t'as juste à mettre à jour par un copier coller (écraser) les anciens css et js du système de grille :)

didouchy, il y a 13 ans

J'ai déjà lu tout ça, les balise html5 son bien prise en compte sous IE, il n'y a pas de souci sur ce point ( vue que j'ai bien mit la balise IE avec le fichier html5.js provenant de google aussi ). C'est les border, les text-shadow, la disposition du header et footer qui me pose un gros problème en particulier.

BenFarhat, il y a 13 ans

si tu as un lien ou je peux consulter le site je pourrais peut être t'aider voir si tu veux appliquer ton site au bootstrap de twitter
C'est comme tu le sens :) n'hésite pas

didouchy, il y a 13 ans

Je viens d'hébergé les fichier ( puisque je travaillé en local avec wamp )

Merci de ton implication et de ton aide :)

didouchy, il y a 13 ans

Problème résolu. c'était le cleatfix::after qui n'été pas prit en compte sur IE...