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 回答