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的填充顶部和填充底部，一切都很好，没有转换问题。但如果我添加30px而不是20px，问题就出现了。

那么，上面div的高度怎么可能改变过渡的行为呢？我尝试在中间添加一个空div，但没有解决问题。这就像问题来自于从银幕到顶部的距离。另外，如果我在“home_slideshow”中使用“position：absolute”来手动定位它，那么问题也就消失了。但是我的布局灵活性不大，我以后会需要。

关于这里可能发生什么的任何想法？非常感谢你提前！

Answer 1

我有类似的问题。尝试将父div的vertical-align属性设置为bottom。

jQuery Cycle的IE问题：转换期间图片中的轻微位移

1 个答案: