问题：

Question

问题：

单击标签时（对于通过将其定位在屏幕外而故意隐藏的单选按钮），浏览器会不合需要地跳到页面顶部。

注意：此问题在不同的浏览器中不一致 - 它出现在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;
}

Answer 1

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

Answer 2

我遇到同样的问题，我使用@Frank Conijn的解决方案，但如果收音机设置为visibility: hidden;或display:none，则为标签（for =＆＃34; #id＆＃34 ;）不能在IE8中工作，最后，我修复它：

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

不要设置top值

Answer 3

问题在于：

system("control schedtasks")

具体来说，.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;默认为hide your content from screen readers。）

Answer 4

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

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

Answer 5

这就是我所做的，并且效果很好，仍然允许访问。

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

这样，输入始终在“视图”中，因此标签不必强制滚动到它。 “ top：0”是可选的，对我来说，它默认为屏幕中间，我只是将其明确放置在某个地方。

Answer 6

只需将opacity: 0;添加到您的input[type="radio"]中

input[type="radio"] {
  opacity: 0;
  position: absolute;
}

Answer 7

浏览器跳转的原因是input（radio或者checkbox）和它的labels相距很远，点击可见的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>

单选按钮使浏览器跳转到顶部

问题：

问题：

示例代码：

•JS Fiddle

•HTML

•CSS

7 个答案: