Мою проблему легче увидеть, чем объяснить:
Вы можете видеть, что во время перехода есть небольшое движение изображений, что выглядит плохо. В 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 и многого другого, я понял, что если я удалю все строки из кода, кроме одной, то проблема исчезнет. И, например, если у меня есть только строка и только одна строка, в зависимости от высоты div "home_title" проблема появляется или исчезает. Например, если я добавлю padding-top и padding-bottom по 20 пикселей, все в порядке, никаких проблем с переходом. Но если я добавлю 30px вместо 20px, проблема останется.
Итак, как возможно, что высота div выше меняет поведение перехода? Я попытался добавить пустой div между ними, но это не решает проблему. Это похоже на то, что проблема исходит из расстояния от силдешоу до вершины. Кроме того, если я использую «position:absolute» в «home_slideshow», чтобы позиционировать его вручную, проблема также исчезнет. Но я теряю гибкость в своем макете, которая мне понадобится позже.
Любые идеи о том, что здесь может происходить? Заранее большое спасибо!