0

我的问题比解释更容易看到：

你可以看到，在过渡过程中，图片有一个小的移动，看起来很糟糕。在 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，但没有解决问题。这就像问题来自从sildeshow到顶部的距离。另外，如果我在“home_slideshow”中使用“position:absolute”手动定位它，那么问题也消失了。但是我的布局失去了灵活性，我稍后会需要。

关于这里会发生什么的任何想法？非常感谢您！

4

1 回答 1

0

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

于 2011-02-18T17:00:12.170 回答