Смещение изображения в Internet Explorer

Question

Я пытаюсь сделать довольно простое слайд-шоу изображений, чтобы заменить одно на основе флэш. У меня это работает последовательно в большинстве современных браузеров, код проверяет (по крайней мере, раньше. После битвы с IE, я не уверен), но, конечно, он не работает правильно в IE 6 и 7. У меня нет Я еще не проверил 8, но я не совсем задерживаю дыхание.

Вы можете посмотреть слайд-шоу здесь . Если это выглядит очень странно, либо вы используете 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 - из моего опыта это часто вызывает проблемы с IE. Вы пытались предварительно просмотреть страницу, не загружая ее?

Answer 2

Я использовал этот плагин для слайдшоу jQuery. его легко настроить и он отлично работает во всех основных браузерах, включая IE6, IE7 и IE8. попробуй

ссылка