的JavaScript style.height無意

晃動如果按文本字符串稱爲簽證/ DOLJ更多資料這是在一個灰色的字體，你會看到，發生驚天效果。這不是故意的，我無法弄清楚什麼是錯的。

爲了澄清，我想知道是什麼導致這種「搖搖欲墜」的效果，並能夠將其刪除。

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>

來源

2012-09-21 ericwenn

這並不回答這個問題，但它可能有幫助。你不能組成html元素。 ''和''不是有效的html元素。如果你驗證你的網站，你會發現你的html中有很多錯誤。而你正在混合不同風格的html。例如，因爲您不使用html5文檔類型，您必須關閉像'
'這樣的'br'標籤。 [驗證結果]（http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fstadskoll.nu%2Frestaurang.php）。如果你糾正所有這些問題，它將導致一個更穩定的網站，跨瀏覽器更好地工作。 – tw16

的問題似乎可以與T他在主內容框中輸入display:inline。如果您添加vertical-align:top它將消失。

我相信正在發生的事情是，由於默認情況下它與基線對齊，因此瀏覽器正在創建div。由於div較高，因此必須調整父容器的大小，然後將div移至該行的底部。

來源

2012-09-21 15:55:13 Knollbert

是的，修復了它。我意識到現在也許我應該在帖子中添加父容器的代碼。感謝您抽出額外時間並檢查它！ :) – ericwenn

的JavaScript style.height無意

回答

相關問題