IE問題jQuery的週期：過渡

Question

過程中的圖片輕微位移

我的問題是比較容易看到比來解釋：

你可以看到，在過渡期間，有圖片的小運動，這很糟糕。在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以及其他許多事情之後，我發現如果從代碼中除去一行代碼中的所有行，那麼問題就消失了。例如，如果我只有一行，只有一行，取決於「home_title」div的高度，問題就會出現或消失。例如，如果我添加20像素的填充頂部和填充底部，則一切正常，沒有轉換問題。但如果我添加30px而不是20px，問題就在那裏。

那麼，上面的div高度如何改變轉換行爲？我試過在中間添加一個空的div，但並未解決問題。這就像問題來自於從sildeshow到頂端的距離。另外，如果我在「home_slideshow」中使用「position：absolute」來手動定位它，那麼問題也就消失了。但是我放鬆了我以後需要的佈局的靈活性。

有什麼想法可以在這裏發生什麼？非常感謝您提前！

Answer 1

我有類似的問題。嘗試將父div的垂直對齊屬性設置爲底部。