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