JavaScript style.height无意中抖动
如果按下名为Visa/dölj mer information的灰色字体文本字符串,您将看到发生的效果正在抖动。这不是故意的,我不知道出了什么问题 为了澄清,我想知道是什么导致了这种“不稳定”的影响,并能够消除它 HTML:JavaScript style.height无意中抖动,javascript,css,transition,Javascript,Css,Transition,如果按下名为Visa/dölj mer information的灰色字体文本字符串,您将看到发生的效果正在抖动。这不是故意的,我不知道出了什么问题 为了澄清,我想知道是什么导致了这种“不稳定”的影响,并能够消除它 HTML: <!--VAL1--> <div id="val1"> <div id="information"> <namn> <a href=""></a>
<!--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>
#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 */
}
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.height == '175px')
e.style.height = '75px';
else
e.style.height = '175px';
}
</script>
JavaScript:
<!--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>
#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 */
}
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.height == '175px')
e.style.height = '75px';
else
e.style.height = '175px';
}
</script>
功能切换(id){
var e=document.getElementById(id);
如果(e.style.height==“175px”)
e、 style.height='75px';
其他的
e、 style.height='175px';
}
问题似乎与maincontentbox上的显示:inline
有关。
如果添加垂直对齐:top
,它将消失
我认为正在发生的是,由于默认情况下它与基线对齐,浏览器正在使div更高。由于div较高,因此必须调整父容器的大小,然后将div移动到行的底部。这并不能回答问题,但可能会有所帮助。不能组成html元素<代码>和
不是有效的html元素。如果你验证你的网站,你会发现你的html中有很多错误。您正在混合不同样式的html。例如,由于您没有使用html5 doctype,因此必须关闭br
标记,如
。如果你纠正了所有这些问题,它将导致一个更稳定的网站,可以更好地跨浏览器工作。是的,这就解决了它。我现在意识到也许我应该在帖子中添加父容器的代码。感谢您抽出额外的时间来查看它!:)