div中的输入复选框跳转到Firefox的页面顶部[关闭]答案

【问题标题】：input checkbox in div jumps to top of page on firefox [closed]div中的输入复选框跳转到Firefox的页面顶部[关闭]
【发布时间】：2014-02-05 04:55:41
【问题描述】：

我使用div 超过label 和input type="checkbox"。我这样做是为了让复选框看起来像一个按钮。

如果复选框或标签/输入将停止跳转到我的页面顶部，我应该怎么做？

这只发生在 Firefox 上。知道如何解决这个问题吗？

【问题讨论】：

对我来说发生在 Chrome 中。请在此处发布您的 HTML 和 CSS。
您的问题仍然没有很好地构建。在共享代码之前列出问题。除了"How to ask" 建议之外，您还需要首先以一种专注于您的研究之后仍然存在哪些差距的方式来陈述问题。描述你迄今为止所做的step like these，包括代码、条件和错误。陈述你已经知道的“明显”上下文，so that people understand what you have tried

【解决方案1】：

DEMO

只需要一个小的 CSS 更改

#modbutton label input {
    /* position:absolute; */
    /* top:-20px; */
    display:none; /* ADD */
}

【讨论】：

【解决方案2】：

发生这种情况是因为您将复选框绝对定位并且在视口上方 -20px。当您单击跨度时，您将触发标签以更改导致跳转到顶部的复选框。有多种方法可以解决此问题，但一种简单的方法是更改：

#modbutton label input {
    position:absolute;
    top:-20px;
}

类似于：

#modbutton label input {
    position:absolute;
    left:-20px;
}

【讨论】：

【解决方案3】：

我明白你的意思

请为您的输入字段更改此代码

<input id="status" type="checkbox" name="displaystaffstatus" style="position: relative;">

或者做这件事

#modbutton label input {
    display:none;
}

【讨论】：