0

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>
4

1 回答 1

1

问题似乎出display:inline在 maincontentbox 上。如果你添加vertical-align:top它会消失。

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

于 2012-09-21T15:55:13.700 回答