【问题标题】：Radio button causes browser to jump to the top单选按钮使浏览器跳转到顶部
【发布时间】：2014-08-09 13:50:00
【问题描述】：

问题：

单击标签时（对于通过将其放置在屏幕外有意隐藏的单选按钮），浏览器会意外跳转到页面顶部。

注意：这个问题在不同浏览器之间是不一致的——在safari和chrome中会出现，在firefox和opera中不会出现

问题：

如何防止浏览器在单击单选按钮的标签时将滚动条跳转到页面顶部？

示例代码：

• JS Fiddle

• HTML

<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 对点击时的页面位置没有影响。你有任何 Javascript '附加'到单选按钮？
嗨，没有。通过搜索，我似乎找不到任何明确的答案。
你可以把它放到网上吗？
我有一个关于 JSfiddle 的例子，滚动到结果部分的单选按钮。 jsfiddle.net/rob_tb/XkQ7T
知道了。看我的回答。

标签： css radio-button

【解决方案1】：

有趣。我不知道它为什么会这样，但解决不需要的行为很容易：将无线电输入的 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 标签。

【讨论】：

这很好用，因为我正在使用它：codepen.io/davidicus/pen/pvObpV 但希望我的位于底部而不是顶部。能见度：隐藏治愈了烦人的“跳跃”。 :)
不要这样做。它破坏了可访问性（键盘和屏幕阅读器）。
@John_911 - 不这样做意味着普通用户和残疾用户会遭受无线电跳跃问题，这样做意味着只有残疾人才能这样做？
我今天面临同样的问题，你解决了，为我工作。谢谢:)
谢谢！我正在使用不透明度：0；隐藏它，因为我需要它仍然能够作为锚链接，但这导致了这种跳跃。

【解决方案2】：

我有同样的问题，我使用@Frank Conijn的解决方案，但是如果收音机visibility: hidden;或display:none，标签（for =“#id”）在IE8中不起作用，最后我修复了它像这样：

.rdbut label input {
  position:absolute;
 left: -9999px;
 }

不要设置top值

【讨论】：

IE8? 2016 年？对 Windows XP 的扩展支持于 2014 年 4 月 8 日结束。IE8 也是如此。如果 IE8 用户必须继续使用 XP，您应该警告他们应该使用 Chrome 或 Firefox。
@FrankConijn IE 还没有看到它的鼎盛时期，IE 功能强大，是一个沉睡的巨人，人们说不支持，我们说支持，IE 是 Chrome 永远不可能的，IE 对开发者很友好, IE 有一个很棒的调试器，永远不会滞后，IE 非常棒
@iiiml0sto1 -- 每个人都有权发表自己的意见。但我说的是 IE8。

【解决方案3】：

无法访问接受的答案：visibility: hidden; 将 hide your content from screen readers。无论如何，麻烦就在这里：

.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; 应该可以防止跳转。

【讨论】：

【解决方案4】：

这就是我所做的，它运行良好并且仍然允许访问。

.hiddenInput {
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
}

这样输入总是在“视图”中，所以标签永远不必强制滚动到它。 'top: 0' 是可选的，对我来说它默认位于屏幕中间，我只是明确地把它放在某个地方。

【讨论】：

其他的对我不起作用，但这个对我有用。 +1
非常感谢您的回答！ position: fixed 而不是 position: absolute 解决了我的问题。对于那些想要了解为什么使用 visibility: hidden 不好的人来说，看看这篇 Medium 文章吧：blog.bitsrc.io/…
这确实是最好的答案。所有其他都破坏了可访问性。无需将单选按钮发送到屏幕外。

【解决方案5】：

只需将“display:none”添加到单选按钮即可。

input[type="radio"]{display:none;}

【讨论】：

【解决方案6】：

浏览器跳转的原因是输入（单选或复选框）与其标签相距较远，当点击可见的label时，input获得焦点，所以浏览器跳转input（焦点）在哪里。

更改布局：将标签的input、label 和::before 元素放在一个网格中。网格固定位置，因此您可以在现场隐藏输入。这样标签和输入就不会发散，所以焦点不会有问题：

<style>
    div {
        display: grid;
        grid-template-columns: auto;
    }
    input {
        display: none;
        grid-column: 1 / 2;
    }
    label {
        grid-column: 1 / 2;
        display: grid;
        grid-template-columns: auto auto;
    }
    label::before {
        grid-column: 1 / 2;
        content: "";
        /* all necessary styling for the fancy input*/
    }
    </style>

    <html>
    <div>
       <input type="radio" id="a"><label for="a">Label text</label>
    </div>
    </html>

【讨论】：