HTML CSS问题与位置属性
问题描述:
我有下面的代码HTML CSS问题与位置属性
<!DOCTYPE html>
<html>
<head>
<title>jQuery goes to DOM-ville</title>
<style>
#change-me {
position:absolute;
top:500px;
left:400px;
font:24px arial;
}
#move_up #move_down #color #disappear {
padding:5px;
}
</style>
<script src="jquery-1.6.2.js"></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Color</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make me do stuff</div>
<script>
$(document).ready(function(){
$("#move_up").click(function(){
$("#change_me").animate({top:30}, 200);
});//end move up
$("#move_down").click(function(){
$("#change_me").animate({top:500}, 2000);
});//end move down
$("#color").click(function(){
$("#change_me").css("color","purple");
});//end color
$("#disappear").click(function(){
$("#change_me").toggle("show");
});//end disappear
});//end doc ready
</script>
</body>
</html>
当我在Firefox中打开HTML(jQuery的文件是在同一文件夹)
,为元素的样式规则显示由萤火虫是零,并且移动起来和下移按钮不工作,但是他们改变了各自的CSS样式,当我改变了下面一行
<div id="change_me">Make me do stuff</div>
这个
<div id="change_me" style="position:absolute;">Make me do stuff</div>
一切似乎再次起作用,所以我的假设是头元素中的任何样式都不应用于html元素,如果是的话,它们的重点是什么,如果它们被应用,那么它们为什么被覆盖。
我的浏览器是火狐11.0 MacOSX的
答
change-me
VS
change_me
两者是不一样的。
一个典型的“过于本地化”的问题。 – thirtydot 2012-04-12 14:31:49