Проблема IE с циклом jQuery: небольшое смещение изображений при переходе

Мою проблему легче увидеть, чем объяснить:

Вы можете видеть, что во время перехода есть небольшое движение изображений, что выглядит плохо. В Firefox этого не происходит.

Вот HTML-код (есть php для CakePHP, который пишет с указанными параметрами, но даже при использовании обычного HTML проблема остается той же):

-- Прежде чем читать код, чтобы сэкономить вам время, вы можете прочитать ниже мои объяснения того, что я выяснил, что вызывает эту проблему --

<div id="home_title">
<h1>TITLE</h1>
<h3>Text line</h3>
<h3>Text line</h3>  
<h3>Text line</h3>
<h3>Text line</h3>  
<h3>Text line</h3>  
<h3>Text line</h3>          
</div>

<div id="home_slideshow">
<div id="slideshow_container">
    <div id="slideshow_frame">

        <div id="slides_home">
            <div class="slide"><?php echo $this->Html->image('/gallery_pics/00294.jpg', array('alt' => '00294'))?></div>
            <div class="slide"><?php echo $this->Html->image('/gallery_pics/00314.jpg', array('alt' => '00314'))?></div>
            <div class="slide"><?php echo $this->Html->image('/gallery_pics/00523.jpg', array('alt' => '00523'))?></div>
            <div class="slide"><?php echo $this->Html->image('/gallery_pics/00786.jpg', array('alt' => '00786'))?></div>
        </div>
    </div>
</div>
</div>

<div id="home_menu">
<a href="#">INTRODUCTION</a> ----
<a href="#">JUST ENTER</a>  
</div>

Вот CSS:

#home_title {
padding-top:10px;
width:100%;
text-align:center;
}

#slideshow_container {
width:1000px;
text-align:center;
}

#slideshow_frame {
overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
}

#slides_home {
margin:auto;
width:900px;
height:611px;
border-style:solid;
border-width:1px;
border-color:#0F0;
}

#slides_home div {
width:900px;
border-style:solid;
border-width:1px;
border-color:#F30; 
}

#slides_home div a img{
margin:auto;
display:block;
}

Итак, после попытки изменить CSS, добавления новых div, удаления div и многого другого, я понял, что если я удалю все строки из кода, кроме одной, то проблема исчезнет. И, например, если у меня есть только строка и только одна строка, в зависимости от высоты div "home_title" проблема появляется или исчезает. Например, если я добавлю padding-top и padding-bottom по 20 пикселей, все в порядке, никаких проблем с переходом. Но если я добавлю 30px вместо 20px, проблема останется.

Итак, как возможно, что высота div выше меняет поведение перехода? Я попытался добавить пустой div между ними, но это не решает проблему. Это похоже на то, что проблема исходит из расстояния от силдешоу до вершины. Кроме того, если я использую «position:absolute» в «home_slideshow», чтобы позиционировать его вручную, проблема также исчезнет. Но я теряю гибкость в своем макете, которая мне понадобится позже.

Любые идеи о том, что здесь может происходить? Заранее большое спасибо!


person Albert R    schedule 18.02.2011    source источник


Ответы (1)


У меня была аналогичная проблема. Попробуйте установить свойство вертикального выравнивания вашего родительского div внизу.

person Brandon    schedule 18.02.2011
comment
@Brandon: Не повезло с этим, я пробовал это в каждом отдельном div и все та же проблема ... IE разочаровывает. Но спасибо за совет! - person Albert R; 18.02.2011
comment
@Albert Альберт - я просмотрел сайт и не уверен на 100%, в чем проблема. Изображения никогда не выглядят полноразмерными в FireFox, но в IE они между полноразмерными и узкими. Это то, что вы имели ввиду? Как насчет того, чтобы избавиться от центра выравнивания текста? - person Brandon; 18.02.2011
comment
@Brandon - Да, я исправил узкие изображения, я изменил его, когда возился с CSS, пытаясь исправить это, и никогда не возвращал его обратно. Хотя сейчас нормально. Что касается выравнивания текста, его удаление устраняет проблему, но тогда я не могу автоматически центрировать изображения в контейнере. Дело в том, что у меня будут изображения разных размеров, и я не буду заранее знать их реальный размер. Я пытался сделать это с помощью javascript и события «до» в цикле (я видел несколько примеров), но это никогда не работало для меня, поэтому использование способа CSS было моим способом сделать это, пока я не узнал о проблема с ИЕ... - person Albert R; 19.02.2011
comment
@Albert - Похоже, вы хотите избавиться от центра выравнивания текста и использовать поля для центрирования изображений, например. margin:0 auto;... в какой версии IE у вас возникла проблема? - person Brandon; 19.02.2011
comment
@Albert. Возможно, вам придется превратить изображение в блок: w3. org/Style/Examples/007/center.en.html - person Brandon; 19.02.2011
comment
@Brandon - Да, я это вижу, но я пытаюсь с полями, и картинки не двигаются, они застряли в левой части своего контейнера. На всякий случай я пытался использовать поля во всех контейнерах, окружающих изображения, но ничего, следуя тому, что написано в вашем примере (спасибо за это). IE 8 вызывает у меня головную боль... - person Albert R; 19.02.2011
comment
@Brandon - ОБНОВЛЕНИЕ: мне наконец удалось центрировать изображения, используя пример, который вы мне дали (поля автоматически), НО проблема с IE вернулась, когда я это делаю, и у меня нет выравнивания текста в коде. Я так понимаю, что проблема должна быть где-то в другом месте... - person Albert R; 19.02.2011
comment
Наконец-то я решил проблему центрирования изображений с помощью JavaScript вместо CSS. Я следовал методу, описанному в этом сообщении: stackoverflow.com/ вопросы/1719475/ . Спасибо большое за вашу помощь в любом случае! - person Albert R; 20.02.2011