IE проблема с циклом jQuery: небольшое смещение в изображениях во время перехода - PullRequest
Новая
       12

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

0 голосов
/ 18 февраля 2011

Моя проблема легче понять, чем объяснить:

Вы можете видеть, что во время перехода происходит небольшое движение изображений, которое выглядит плохо. В 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", проблема возникает или исчезает. Например, если я добавлю верхний слой отступа и нижний слой отступа 20 пикселей, все будет в порядке, никаких проблем с переходом. Но если я добавлю 30px вместо 20px, проблема в этом.

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

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

1 Ответ

0 голосов
/ 18 февраля 2011

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

...