Décalage d'image Internet Explorer

Question

J'essaie de créer un diaporama d'images assez simple pour remplacer un diaporama basé sur le flash. Je l'ai eu fonctionnant de manière cohérente dans la plupart des navigateurs modernes, le code valide (au moins il l'habitude.Après avoir lutté contre IE, je ne suis pas sûr) mais bien sûr cela ne fonctionne pas correctement dans IE 6 et 7. Je n'ai pas J'ai encore vérifié, mais je ne retiens pas exactement mon souffle.

Vous pouvez voir le diaporama here. Si cela vous semble extrêmement étrange, soit vous utilisez IE, soit je le tripote pour essayer de le faire fonctionner correctement dans IE. Ce qui se passe dans IE est qu'environ 3 ou 4 pixels sont ajoutés à gauche de chaque image dans le diaporama, et la dernière image n'est jamais montrée dans IE (il y a un total de 5 images), et je peux ' t pour la vie de moi comprendre pourquoi.

Voici la partie du corps de index.html. J'ai supprimé la partie javascript, car je suis sûr que ce n'est pas le problème. Si vous voulez vraiment le voir, vérifiez la source de la page que j'ai publiée.

<div id="wrapper"> 
<div id="viewport"> 
    <div id="images"> 
     <a href="http://ungdomar.se/forum.php?thread_id=221846"><img src="image1.png" alt="Kärleksvecka: Relationsdagboken" /></a> 
     <a href="http://ungdomar.se/text.php?text=1563"><img src="image2.png" alt="Biorecension: An Education" /></a> 
     <a href="http://ungdomar.se/text.php?text=1561"><img src="image3.png" alt="Det börjar dra ihop sig till val" /></a> 
     <a href="http://ungdomar.se/news.php?text=1553"><img src="image4.png" alt="Vinn biobiljetter och prinsessa-DVD" /></a> 
     <a href="http://ungdomar.se/text.php?text=1560"><img src="image5.png" alt="Novell: Fallafel berättelsen om Gösta" /></a> 
    </div> 
</div> 
<div id="controls_bg"> 
    <div id="controls"> 
     <a href="#" rel="1">1</a> 
     <a href="#" rel="2">2</a> 
     <a href="#" rel="3">3</a> 
     <a href="#" rel="4">4</a> 
     <a href="#" rel="5">5</a> 
    </div> 
</div> 
<div id="imagetexts"> 
    <ol> 
     <li> 
      <h2>Kärleksvecka: Relationsdagboken</h2> 
      <p>Inför Alla Hjärtans Dag kommer kärleken att flöda på UM. I relationsdagboken kan du dela med dig av dina känslor.</p> 
     </li> 
     <li> 
      <h2>Biorecension: An Education</h2> 
      <p>Användaren Dunno vill inte göra något annat än att lyssna på Juliette Gréco och bära Mad Men-kostymer resten av sitt liv.</p> 
     </li> 
     <li> 
      <h2>Det börjar dra ihop sig till val</h2> 
      <p>ANNONS: Läs om hur du får hjälp med att välja gymnasium.</p> 
     </li> 
     <li> 
      <h2>Vinn biobiljetter och prinsessa-DVD</h2> 
      <p>Berätta om din dröm och ha chansen att vinna biobiljetter och DVD-filmen Prinsessa.</p> 
     </li> 
     <li> 
      <h2>Novell: Fallafel berättelsen om Gösta</h2> 
      <p>Beväpnad med ett par nyinhandlade bouleklot linkade Gösta ut i Malmö för att totaldemolera stadens falafelvagnar.</p> 
     </li> 
    </ol> 
</div> 

<h1>Ser det underligt ut så beror det på att jag försöker få skiten att fungera i Internet Explorer.</h1> 

Et le css:

*,* { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent; 
    border: none; 
    } 

img, div,a { behavior: url(iepngfix.htc) } 

#wrapper { 
float: left; 
position: relative; 
    font-family: Arial, Helvetica, Verdana, sans-serif; 
    margin-left: 10px; 
    margin-top: 10px; 
    display:inline; 
    width: 100%; 
    } 

#viewport { 
height:300px; width: 449px; 
overflow: hidden; /*--Hides anything outside of the set width/height--*/ 
position: relative; 
    } 

#images { 
position: absolute; 
top: 0; left: 0; 
    } 

#images img { 
    float: left; 
    margin:0px; 
    padding: 0px; 
    } 

#controls_bg { 
    position: absolute; 
top: 10px; 
    left: 340px; 
width: 120px; 
    height:21px; 
z-index: 100; 
text-align: left; 
line-height: 20px; 
background: url(controls.png) no-repeat; 
display: none; /*Will be shown later with jQuery*/ 
    } 

#controls { 
text-align: left; 
line-height: 20px; 
    margin-left: 1px; 
    } 

#controls a { 
padding: 3.5px; 
text-decoration: none; 
color: #fff; 
    font-size: 0.8em; 
    outline:none; 
    font-weight: bold; 
    } 

#controls a.active { 
    color: #0f98ef; 
    } 

#imagetexts { 
    position:absolute; 
    bottom: 20px; left:0px; 
    width: 449px; 
    height: 65px; 
    background: url(overlay.png) no-repeat; 
    } 

#imagetexts li { 
    list-style-type: none; 
    width: 350px; 
    margin-left: 5px; 
    margin-top: 10px; 
    display: none; 
    line-height: 1em; 
    font-size: 0.9em; 
    } 

#imagetexts h2 { 
    width: 370px; 
    color: #1099f1; 
    font-size: 1.4em; 
    line-height: 0.7em; 
    position: relative; 
    float: left; 
    margin-bottom: 5px; 
    margin-top: 0px; 
    } 

#imagetexts p { 
    color: #fff; 
    font-size: 0.9em; 
    } 

Si vous pouvez comprendre ce qui cause IE pour ajouter ces pixels, je serais éternellement reconnaissant. Je n'ai pas fait beaucoup de conception de sites Web récemment, et quand j'ai, j'ai simplement ignoré IE. Mais maintenant je me trouve obligé de le faire au moins sembler acceptable dans IE.

Pour plus d'informations, il suffit de demander.

Answer 1

Je vois que vous utilisez fix .png là - de mon expérience cela provoque souvent des problèmes à IE. Avez-vous essayé de prévisualiser la page sans la charger?

Answer 2

J'ai déjà utilisé ce plugin de diaporama jQuery. il est facile à personnaliser et fonctionne parfaitement sur tous les principaux navigateurs, y compris IE6, IE7 et IE8. donner un essai

link