每当我点击复选框时,浏览器窗口(firefox)将在屏幕顶部滚动.
如何防止此行为,因此当我单击复选框时,浏览器窗口将不会滚动到顶部？
这是从这里找到的代码http://jsfiddle.net/zAFND/6/
谢谢.
<html>
<head>
<title>Test</title>
<style>
div label input {
margin-right: 100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
#ck-button label {
float: left;
width: 4.0em;
}
#ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
background-color: #911;
color: #fff;
}
</style>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
</body>
ins*_*ere 33
问题是这个规则:
#ck-button label input {
position:absolute;
top:-20px;
}
单击标签时,浏览器会尝试聚焦相关输入.在您的情况下,checkbox元素位于页面顶部,即使在视口的外部也是如此.所以Firefox试图在那里滚动.
我想你可以通过添加以下内容来解决这个问题:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
演示
编辑
当我今天回到这个答案时,关于海森堡的答案:他指出了一个问题,可以通过使用极值来解决,并添加了另一个基本上与我的相同的诡计.
为了避免这些可能的怪癖,这是另一种可能的解决方案,只需隐藏输入即可.功能不受影响,您可以在下面的链接中进行测试.
CSS
#ck-button label input {
display: none;
}
演示
Hei*_*erg 15
接受的答案并不完全正确.有效,但并非在所有情况下都有效.
如果使用公共css隐藏"top"属性中的元素(可能是-999em或类似),在这种情况下position:relative无关,因为-999em总是比视口高得多.
接受的答案很好,因为"顶部"只有-20px.尝试将其设置为更高的数字,您将看到问题所在.
因此,解决方案不是设置相对位置.我认为正确的方法是在左侧位置(而不是顶部)设置负值.
试试吧.:)
你可以像这样隐藏你的复选框输入：
#ck-button label input {
position:absolute;
top:+20px;
visibility: hidden;
}