每当我单击复选框时，浏览器窗口（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>
问题是这个规则：
#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;
}
演示版
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句