每当我单击复选框时，浏览器窗口 (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;
}
当您单击标签时，浏览器会尝试聚焦相关输入。在您的情况下，复选框元素位于页面顶部，甚至在视口(viewport)之外 - 因此 Firefox 会尝试滚动到那里。
您可以通过添加以下内容来解决它:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
演示
Try before buy
替代
海森堡在他的 answer 中指出了使用极值时可能出现的问题。不幸的是，提议的想法与上面显示的想法有相同的怪癖。
因此，另一种解决方案是简单地隐藏输入。功能不受影响。
CSS
#ck-button label input {
display: none;
}
演示
Try before buy
关于html - 单击复选框时，如何防止浏览器在页面顶部滚动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17974108/