http://stadskoll.nu/restaurang.php
如果您按下灰色字体的名为Visa/dölj mer信息的文本字符串,您将看到正在发生的效果正在晃动。这不是故意的,我无法弄清楚出了什么问题。
澄清一下,我想知道是什么导致了这种"摇摇欲坠"的效果,并能够将其删除。
.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>
问题似乎出在主内容框上的display:inline
上。如果添加vertical-align:top
它将消失。
我相信正在发生的事情是,由于默认情况下它与基线对齐,因此浏览器正在使div更高。 由于div 更高,因此它必须调整父容器的大小,然后将div 移动到行的底部。