JavaScript style.height 无意中晃动

Question

http://stadskoll.nu/restaurang.php

如果您按下灰色字体的名为Visa/dölj mer information 的文本字符串，您会看到出现的效果是摇晃。这不是故意的，我不知道出了什么问题。

澄清一下，我想知道是什么导致了这种“不稳定”的效果，并且能够消除它。

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>

Answer 1

问题似乎与 maincontentbox 上的 display:inline 有关。如果你添加 vertical-align:top 它就会消失。

我认为正在发生的事情是，由于默认情况下它与基线对齐，因此浏览器使 div 更高。由于 div 较高，它必须调整父容器的大小，然后将 div 移动到行的底部。