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 の削除、および他の多くのことを試みた後、コードから 1 行を除いてすべての行を削除すると、問題がなくなることがわかりました。たとえば、「home_title」divの高さに応じて、行と行が1つしかない場合、問題が発生したり消えたりします。たとえば、20px の padding-top と padding-bottom を追加すると、すべて問題なく、遷移の問題はありません。しかし、20px ではなく 30px を追加すると、問題が発生します。

では、上の div の高さがトランジションの動作を変更する可能性はどのようにあるのでしょうか? 間に空の div を追加しようとしましたが、問題は解決しません。問題は、スライドショーからトップまでの距離にあるようです。また、「home_slideshow」で「position:absolute」を使用して手動で配置すると、問題もなくなりました。しかし、後で必要になるレイアウトの柔軟性が失われます。

ここで何が起こっているのかについてのアイデアはありますか? 事前にどうもありがとうございました！

4

1 に答える 1

0

同様の問題がありました。親 div の vertical-align プロパティを下に設定してみてください。

于 2011-02-18T17:00:12.170 に答える