Internet Explorer圖像偏移量

我試圖做一個相當簡單的圖像幻燈片來取代基於Flash的圖像。我已經在大多數現代瀏覽器中始終如一地工作了，代碼驗證了（至少它曾經用過。在與IE作戰後，我不確定），但當然它在IE 6和7中無法正常工作。還沒有檢查8，但我並不完全屏住呼吸。Internet Explorer圖像偏移量

您可以看到幻燈片here。如果它看起來非常奇怪，無論是你使用的IE瀏覽器或我擺弄它嘗試讓它在IE瀏覽器正常工作。

IE中發生的事情是在幻燈片中每個圖像的左側添加了大約3或4個像素，最後一個圖像甚至從未在IE中顯示過（總共有5個圖像）爲了我的生活，找出原因。

以下是index.html的正文部分。我刪除了javascript部分，因爲我確定這不是問題。如果你真的想看到它，只需檢查我發佈的網頁的來源。

<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>

而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; 
    }

如果你能找出是什麼導致IE添加這些像素，我將永遠感激。最近我沒有做過很多網頁設計，而當我有時，我只是不理會IE瀏覽器。但現在我發現自己被迫在IE中至少看起來可以接受。

欲瞭解更多信息，請詢問。

來源

2010-02-09 Tommy Brunn