IE 与 jQuery Cycle 的问题：过渡期间图片轻微位移

Question

我的问题更容易看到而不是解释：

您可以看到在过渡期间，图片有一个小的移动，看起来很糟糕。在 Firefox 中这不会发生。

这是 HTML 代码（CakePHP 有一些 php，它使用指定的参数编写，但即使使用常规 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和许多其他事情之后，我发现如果我删除所有代码中除了一行之外，问题就消失了。例如，如果我只有一行且只有一行，则根据“home_title”div 的高度，问题会出现或消失。例如，如果我添加 20px 的 padding-top 和 padding-bottom，一切都很好，没有过渡问题。但如果我添加 30px 而不是 20px，问题就出现了。

那么，上面 div 的高度怎么可能改变过渡的行为呢？我尝试在中间添加一个空的 div，但没有解决问题。问题似乎出在幻灯片到顶部的距离上。另外，如果我在“home_slideshow”中使用“position:absolute”来手动定位它，那么问题也消失了。但我的布局失去了灵活性，稍后我将需要这种灵活性。

对于这里会发生什么有什么想法吗？预先非常感谢您！

Answer 1

我有类似的问题。尝试将父 div 的垂直对齐属性设置为底部。