css - Internet Explorer 图像偏移

Question

我正在尝试制作一个相当简单的图像幻灯片来取代基于 Flash 的幻灯片。我已经让它在大多数现代浏览器中始终如一地工作，代码验证(至少它曾经是。在与 IE 战斗之后，我不确定)但是当然它在 IE 6 和 7 中不能正常工作。我没有'尚未检查 8，但我并没有完全屏住呼吸。

可以看到幻灯片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 中看起来可以接受。

欲了解更多信息，请询问。

Answer 1

我看到你在那里使用 png fix - 根据我的经验，这通常会给 IE 带来问题。您是否尝试过在不加载页面的情况下预览页面？