问题:

当点击标签时(对于通过将其定位在屏幕外而故意隐藏的单选按钮),浏览器会不期望地跳到页面顶部.

注意:这个问题在不同的浏览器中是不一致的 - 它出现在safari和chrome中,并且它不会出现在firefox或opera中

题:

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

示例代码:

• JS小提琴

•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: …

Chrome Version 59.0.3071.109 (Official Build) (64-bit)（至少在 OSX 上）的行为与 58 不同，因为在隐身会话中，通过浏览器通知 API 请求权限的调用不会向用户显示权限请求弹出窗口；相反，它会自动静默地将权限设置为defaultto blocked。

此外，在 URL 栏旁边的正常内容设置 UI 中，“通知权限”选项下拉列表中缺少“始终允许在此站点上”选项。

如何在 Chrome v59 中允许某些内容（如通知）专门用于隐身会话？

我使用类似margin-top: calc(100% - $value)的方法是为了计算将涉及 100% 的高度来计算上边距。然而，实际上它是基于 100% 的宽度进行计算的。

任何人都有关于如何基于百分比高度而不是宽度进行计算的任何线索？（到目前为止，我已经检查过 Chrome 和 FF 中都发生了不受欢迎的行为）。

https://jsfiddle.net/bfxhebc3/

我知道在客户端，React 会重新渲染需要随时更新的 DOM 部分，因此在初始页面加载后无需重新加载整个页面（因此它将是一个页面应用程序）。

使用服务器端渲染，我仍然使用单页应用程序功能吗？

关于这个话题有一个类似的问题，但我相信它没有回答我的问题。如果要实现单页应用，是否必须同时使用服务器端和客户端渲染？