J'espère que quelqu'un peut vous aider. Dans mon container DIV j'ai 3 images dont j'ai besoin pour m'asseoir côte à côte en une rangée. C'est en effet le cas dans tous les autres navigateurs sauf, gênant, comme d'habitude, dans IE6, IE7 et IE8 (gémissement).Rembourrage indésirable sur les images de lien dans IE seulement
Chacune des images est enveloppée dans une balise comme suit: -
<div id="images">
<a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a>
<a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a>
<a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a>
</div><!--end of images-->
Mon CSS est la suivante: -
/* Global reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
display:block;
}
img{
display:block;
}
/* End Global reset */
#images{
width:295px;
clear:both;
border:none;
margin-top:30px;
}
#images a:link{
text-decoration:none;
border:none;
}
#images a:visited{
text-decoration:none;
border:none;
}
#images a:hover{
text-decoration:none;
border:none;
}
img.img01,img.img02 {
width:98px;
float:left;
}
img.img03{
width:99px;
float:right;
}
Peu importe ce que je fais Je n'arrive pas à corriger l'affichage dans IE. IE ajoute un remplissage supplémentaire à gauche et à droite de chaque image, et le résultat est que 2 images ne s'affichent que dans la rangée et la 3ème image apparaît en dessous (flottante à droite).
J'ai essayé d'enlever tout l'espace blanc (une suggestion que j'ai trouvée ailleurs) mais cela n'a pas aidé. J'ai aussi joué avec des marges négatives mais je préfère ne pas suivre cette voie sans comprendre ce qui se passe réellement.
Quelqu'un peut-il faire la lumière sur ce qui se passe réellement ici et comment je peux résoudre? - Ça me rend fou!
Merci beaucoup à l'avance.
Pouvez-vous mettre en place une page de test sur jsbin.com Ensuite, nous pouvons tous voir ce que le résultat de l'css ci-dessus est – ekhaled