单选按钮使浏览器跳到顶部 [英] Radio button causes browser to jump to the top
问题描述
单击标签时（对于通过在屏幕外放置而有意隐藏的单选按钮），浏览器不希望跳到页面顶部。
When clicking on a label (for a radio button that has been intentionally hidden by positioning it off-screen), the browser undesirably jumps to the top of the page.
注意：此问题在不同的浏览器中不一致-发生在Safari和chrome中，而不出现在firefox或Opera中
当单击单选按钮的标签时，如何防止浏览器将滚动跳转到页面顶部？
How can I prevent the browser from jumping the scroll to the top of the page when clicking the radio button's label?
<div class="rdbut">
<label class="colour">
<input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
<span>£24.99</span></label>
</div>
<div class="rdbut">
<label class="colour">
<input id="option-AVGANT2Y2PC" type="radio" name="Multi-licence" value="2 Year 2 PC|+34.00|0" checked="checked" />
<span>£35.00</span></label>
</div>
•CSS
.rdbut {
margin: 0px;
}
.rdbut label {
float: left;
width: 65px;
margin: 4px;
background-color: #EFEFEF;
box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.25);
border: none;
overflow: auto;
display: inline;
}
.rdbut label span {
text-align: center;
font-size: 12px;
padding: 3px 8px;
display: block;
}
.rdbut label input {
position: absolute;
top: -9999px;
left: -9999px;
}
.rdbut input:checked+span {
background-color: #404040;
color: #F7F7F7;
}
.rdbut .colour {
background-color: #FF8E22;
color: #ffffff;
}
推荐答案
有趣。我不知道为什么会这样，但是解决不必要的行为很容易：交换CSS top 和 left 可见性为的无线电输入的值：隐藏。
Interesting. I don't know exactly why it behaves that way, but curing the unwanted behavior is easy: exchange the CSS top and left values of the radio inputs for visibility: hidden.
就像这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
#content {
width: 500px;
}
.rdbut {
margin:0px;
}
.rdbut label {
float:left;
width:65px;
margin:4px;
background-color:#EFEFEF;
border:none;
overflow:auto;
display:inline;
}
.rdbut label span {
text-align:center;
font-size: 12px;
padding:3px 8px;
display:block;
}
.rdbut label input {
position:absolute;
t/op: -9999px;
l/eft: -9999px;
visibility: hidden;
}
.rdbut input:checked + span {
background-color:#404040;
color:#F7F7F7;
}
.rdbut .colour {
background-color:#FF8E22;
color:#ffffff;
}
</style>
</head>
<body>
<div id="content">
<p>"Lorem ipsum" goes here.
</p>
<div class="rdbut">
<label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
<span>£24.99</span></label>
</div>
<div class="rdbut">
<label class="colour"><input id="option-AVGANT2Y2PC" type="radio" name="Multi-licence" value="2 Year 2 PC|+34.00|0" checked="checked" />
<span>£35.00</span></label>
</div>
<div class="rdbut">
<label class="colour"><input id="option-AVGANT1Y2PC" type="radio" name="Multi-licence" value="1 Year 2 PC|+23.99|0" checked="checked" />
<span>£24.99</span></label>
</div>
</div>
</body>
</html>
在此处更新了JSFiddle： http://jsfiddle.net/XkQ7T/1/ 。
Updated JSFiddle here: http://jsfiddle.net/XkQ7T/1/.
。
顺便说一句，在每个单选按钮上设置 checked 是没有用的-实际上只检查最后一个。并且它会使您的代码无效。另外，您需要在无线电输入组周围使用 form 标签。
.
By the way, setting checked on every radio button is no use - only the last one is actually checked. And it invalidates your code. Also, you need form tags around the group of radio inputs.
这篇关于单选按钮使浏览器跳到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
