Question

如果您按下名为 Visa /döljmer信息的文本字符串（灰色字体），您将看到发生的效果正在颤抖。这不是故意的，我无法弄清楚什么是错的。

为了澄清，我想知道是什么导致了这种“不稳定”的效果，并能够将其删除。

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移动到行的底部。

JavaScript style.height无意中摇晃

1 个答案: