当点击标签时(对于通过将其定位在屏幕外而故意隐藏的单选按钮),浏览器会不期望地跳到页面顶部.
注意:这个问题在不同的浏览器中是不一致的 - 它出现在safari和chrome中,并且它不会出现在firefox或opera中
单击单选按钮的标签时,如何防止浏览器将滚动条跳到页面顶部？
<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>
.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;
}
Fra*_*ijn 15
有趣.我不确切地知道它为什么会这样,但是固化不需要的行为很容易:交换CSS top和left无线电输入的值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/.
.
顺便说一句,设置checked每个单选按钮是没有用的 - 实际上只检查了最后一个.它会使您的代码无效.此外,您需要form围绕无线电输入组的标签.
对角另*_*另一面 12
我有同样的问题,我使用@Frank Conijn的解决方案,但如果无线电设置visibility: hidden;或display:none标签(for ="#id")在IE8中不起作用,我最后修复它:
.rdbut label input {
position:absolute;
left: -9999px;
}
不要设定top价值
已接受的答案不可访问：visibility: hidden;将隐藏您的内容对屏幕阅读器。不管怎样，麻烦就在这里：
.rdbut label input {
position: absolute;
top: -9999px;
left: -9999px;
}
具体来说，这top: -9999;会导致浏览器尝试达到该点。
我喜欢设置一个类来隐藏这样的东西，使用以下参数。然后你可以把它贴在任何地方：
.visually-hidden {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
注意top: auto;哪个应该防止跳转。
小智 6
这就是我所做的，它运行良好并且仍然允许访问。
.hiddenInput {
opacity: 0;
height: 0;
width: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
}
这样输入总是在“视图”中，所以标签永远不必强行滚动到它。'top: 0' 是可选的，对我来说它默认在我的屏幕中间，我只是明确地把它放在某个地方。