Compatibilité firefox et internet explorer
Résolu
Bonjour,
Je suis en train de créer un site dans lequel j'insère des photos qui servent de lien entre elles. Avec firefox le résultat est parfait mais lorsque j'ouvre mon site avec Internet explorer il y a un décalage entre les photos et elles sont entourées d'un trait bleu.
Est-ce qu'il y a un code HTML ou CSS à insérer pour que mon site soit identique dans les deux cas ?
Merci de l'aide que vous pourrez m'apporter.
Voici les codes de mes 2 blocs
<div id="corps6A">
<div align="center">
<a href="information_portfolio2.html"><img src="images/portfolio2.jpg" width="123" height="80" vspace="8" /></a>
<a href="information_portfolio3.html"><img src="images/portfolio3.jpg" width="123" height="80" vspace="8" /></a>
<a href="information_portfolio4.html"><img src="images/portfolio4.jpg" width="123" height="80" vspace="8" /></a>
<a href="information_portfolio5.html"><img src="images/portfolio5.jpg" width="123" height="80" vspace="8" /></a>
</div>
</div>
<div id="corps6B">
<div align="center"><img src="images/portfolio1.jpg" width="570" height="370" vspace="8" /></div>
</div>
Je suis en train de créer un site dans lequel j'insère des photos qui servent de lien entre elles. Avec firefox le résultat est parfait mais lorsque j'ouvre mon site avec Internet explorer il y a un décalage entre les photos et elles sont entourées d'un trait bleu.
Est-ce qu'il y a un code HTML ou CSS à insérer pour que mon site soit identique dans les deux cas ?
Merci de l'aide que vous pourrez m'apporter.
Voici les codes de mes 2 blocs
<div id="corps6A">
<div align="center">
<a href="information_portfolio2.html"><img src="images/portfolio2.jpg" width="123" height="80" vspace="8" /></a>
<a href="information_portfolio3.html"><img src="images/portfolio3.jpg" width="123" height="80" vspace="8" /></a>
<a href="information_portfolio4.html"><img src="images/portfolio4.jpg" width="123" height="80" vspace="8" /></a>
<a href="information_portfolio5.html"><img src="images/portfolio5.jpg" width="123" height="80" vspace="8" /></a>
</div>
</div>
<div id="corps6B">
<div align="center"><img src="images/portfolio1.jpg" width="570" height="370" vspace="8" /></div>
</div>
5 réponses
-
Salut,
Pendant que tu y es regarde ton site sous Chrome c'est désormais un des navigateurs les plus utilisés. -
Modérateuril faut voir avec ta css, voir si tu peux mettre éventuellement un 'hack' pour IE ...
faut tester et re-tester ... en local de préférence :)
et pour les autres version de IE:
https://www.commentcamarche.net/telecharger/web-internet/12105-ietester/-
Merci pour le logiciel.
Qu'est-ce qu'un "hack" ?
Voici la css
#container #corps6 #corps6A{
width: 150px;
background-color: #FFFFFF;
color: #666666;
float: left;
padding: 5px;
margin: 5px;
}
#container #corps6 #corps6B{
width: 570px;
background-color: #FFFFFF;
color: #666666;
float: left;
margin: 5px;
padding: 5px;
}
-
-
Je viens de comprendre d'où vient le problème.
Il s'agit des liens entre les photos ! J'ai supprimé les liens permettant de passer d'une photo à l'autre et là l'espace entre les images est respecté.
Alors comment faire pour que sous IE les liens ne défigurent pas ma conception ? -
C'est bon j'ai trouvé la solution à mon problème. Il s'agissait des bordures qui encadraient les photos.
J'ai rajouté a img {border: none;} à mon css et c'est parfait ! -
Sinon, vous pouvez utiliser cette astuce publiée sur le site HTML5 Boilerplate (http://fr.html5boilerplate.com/) et provenant de ce cher Paul Irish :
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
En gros, ce code rajoute une classe à la balise HTML suivant la version d'Internet Explorer.
De cette façon, pour cibler une version spécifique, vous avez juste à écrire pour cibler une div :.ie7 div{ ..... }
De plus, ce code est valide W3C pour ceux qui y serait attentif.
