0

http://stadskoll.nu/restaurang.php

灰色のフォントで表示されているVisa/döljmerinformationというテキストの文字列を押すと、発生している効果が揺れていることがわかります。これは意図的なものではなく、何が問題なのか理解できません。

明確にするために、この「不安定な」効果の原因を知り、それを取り除くことができるようにしたいと思います。

HTML：

<!--VAL1-->
<div id="val1">
    <div id="information">
        <namn>
            <a href=""></a>
        </namn>
        <br>
        <a id="funktion" onclick="toggle('val1');toggleoff_val1('val1');">visa/dölj mer information</a>
        <br>
        <div id="star2" style="background-position:0 -0px">
            <div id="stars1">
                <div class="first"  onmouseover="starmove('-32px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','1');succes()"></div>
                <div class="first" onmouseover="starmove('-64px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','2');succes()"></div>
                <div class="first" onmouseover="starmove('-96px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','3');succes()"></div>
                <div class="first" onmouseover="starmove('-128px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','4');succes()"></div>
                <div class="first" onmouseover="starmove('-160px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','5');succes()"></div>
            </div>
        </div>
        <div id="txt"></div>
        <br>
        <br>
        <information></information>
    </div>
    <div id="bilder">
        <a href = "javascript:void(0)" onclick="popup('bildval1');fade('fadebild1')"><img src="" /></a>
        <br/>
        <a href = "javascript:void(0)" onclick="popup('kartaval1');fade('fadekarta1')"><img src="http://stadskoll.nu/bilder/karta.jpg" /></a>
    </div>
</div>

CSS：

#val1 {
    width:83%;
    height:75px;
    border-top:1px;
    border-top-style:groove;
    margin-left:40px;
    overflow:hidden;
    padding-top:10px;
    padding-left:20px;
    -webkit-transition: all 0.5s ease-in-out;    
    transition: height 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
    -o-transition: all 0.5s ease-in-out; /* Opera */                
}

JavaScript：

<script>   
    function toggle(id) {
       var e = document.getElementById(id);
       if(e.style.height == '175px')
          e.style.height = '75px';
              else
          e.style.height = '175px';         
    }
</script>
4

1 に答える 1

1

この問題はdisplay:inline、メインコンテンツボックスのにあるようです。追加vertical-align:topすると消えます。

私が起こっていると思うのは、デフォルトではベースラインに合わせられているため、ブラウザがdivを高くしているということです。divの方が高いため、親コンテナのサイズを変更してから、divを行の一番下に移動する必要があります。

于 2012-09-21T15:55:13.700 に答える