页面移动收音机/明星选择答案

【问题标题】：Page moves on radio/star select页面移动收音机/明星选择
【发布时间】：2017-08-26 14:21:15
【问题描述】：

我将这里的代码用于多个 CSS 星级收音机：https://stackoverflow.com/a/27067571/2520920

.rating {
  float: left;
}
.rating:not(:checked) > input {
  position: absolute;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}
.rating:not(:checked) > label {
  float: right;
  width: 1em;
  padding: 0 .1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 200%;
  line-height: 1.2;
  color: #ddd;
  text-shadow: 1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating:not(:checked) > label:before {
  content: &#9733;
}
.rating > input:checked ~ label {
  color: #ff7700;
  text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;
  text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating> input:checked + label:hover,
.rating> input:checked + label:hover ~ label,
.rating> input:checked ~ label:hover,
.rating> input:checked ~ label:hover ~ label,
.rating> label:hover ~ input:checked ~ label {
  color: #ea0;
  text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5);
}
.rating > label:active {
  position: relative;
  top: 2px;
  left: 2px;
}

<div class="control-group">
  <label class="control-label" for="meals">Meals</label>
  <div class="controls rating one">
    <input type="radio" id="star5" name="meals" value="5" />
    <label for="star5"><span>&#9733</span>
    </label>
    <input type="radio" id="star4" name="meals" value="4" />
    <label for="star4"><span>&#9733</span>
    </label>
    <input type="radio" id="star3" name="meals" value="3" />
    <label for="star3"><span>&#9733</span>
    </label>
    <input type="radio" id="star2" name="meals" value="2" />
    <label for="star2"><span>&#9733</span>
    </label>
    <input type="radio" id="star1" name="meals" value="1" />
    <label for="star1"><span>&#9733</span>
    </label>
  </div>
</div>

<!--added so that you can see the page jump--->
<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><br><br>

<div class="control-group">
  <label class="control-label" for="lodging">Lodging</label>
  <div class="controls rating two">
    <input type="radio" id="star5-1" name="lodging" value="5" />
    <label for="star5-1"><span>&#9733</span>
    </label>
    <input type="radio" id="star4-1" name="lodging" value="4" />
    <label for="star4-1"><span>&#9733</span>
    </label>
    <input type="radio" id="star3-1" name="lodging" value="3" />
    <label for="star3-1"><span>&#9733</span>
    </label>
    <input type="radio" id="star2-1" name="lodging" value="2" />
    <label for="star2-1"><span>&#9733</span>
    </label>
    <input type="radio" id="star1-1" name="lodging" value="1" />
    <label for="star1-1"><span>&#9733</span>
    </label>
  </div>
</div>

<!--added so that you can see the page jump--->
<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><br><br>

<div class="control-group">
  <label class="control-label" for="trans">Transportation</label>
  <div class="controls rating three">
    <input type="radio" id="star5-2" name="trans" value="5" />
    <label for="star5-2"><span>&#9733</span>
    </label>
    <input type="radio" id="star4-2" name="trans" value="4" />
    <label for="star4-2"><span>&#9733</span>
    </label>
    <input type="radio" id="star3-2" name="trans" value="3" />
    <label for="star3-2"><span>&#9733</span>
    </label>
    <input type="radio" id="star2-2" name="trans" value="2" />
    <label for="star2-2"><span>&#9733</span>
    </label>
    <input type="radio" id="star1-2" name="trans" value="1" />
    <label for="star1-1"><span>&#9733</span>
    </label>
  </div>
</div>

每次我点击星级评分时，页面都会跳到顶部。我已经玩了很多 .rating > label:active CSS 属性 - 我可以使页面静止，但星级评级不起作用。

非常感谢任何建议。谢谢！

【问题讨论】：

确保为有问题的元素设置高度。此外，单选按钮在每个浏览器中的行为都非常不同，修复它的最佳方法是在跨度内添加，给跨度一个高度和宽度，然后你就完成了。
@RensTillmann - 这似乎不起作用<span style="height:50px; width:250px;"> 是我在每个对照组中尝试的。我错过了什么吗？
不给你的输入字段和标签一个高度和一个边框，看看发生了什么。或者只是在所有元素上添加边框，它会让您清楚地了解导致问题的位置和原因。仅通过阅读您的代码很难判断。
你说点击星号时页面会一直到顶部（立即）？那一定是外部脚本，这只能是原因。
能否尝试禁用所有的js文件？

标签： html css radio-button

【解决方案1】：

从绝对位置固定您的位置。

这里

.rating:not(:checked) > input {
  position: fixed;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}

【讨论】：