无线电选择中的页面位置重置

Question

为什么在此jsfiddle中进行选择时页面位置会重置，如何防止它？

https://jsfiddle.net/zexvtoz1/21/

HTML：

<fieldset class="rating one">
  <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label>
  <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label>
  <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label>
  <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label>
  <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label>
</fieldset>

正在发生的马铃薯品质GIF：

http://i.imgur.com/uEvn58U.gif

编辑：新的jsfiddle链接

Answer 1

我想出了如何修复它，但不知道为什么会发生这种情况（虽然我可以猜测它正试图用单选按钮定位自己＆＃34;在视图中＃34;）。

我更改了以下代码

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

到

.rating:not(:checked) > input {
  position:absolute;
  visibility: hidden;
  clip:rect(0,0,0,0);
}

摆弄修复https://jsfiddle.net/t4t0dxqz/

Finally found a thread that clued me in