div中的输入复选框跳转到firefox上的页面顶部

Question

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

这是我的例子:http://jsfiddle.net/Je87Q/

我应该怎么做一个复选框或标签/输入,它会停止跳到我的页面顶部？

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

Answer 1

DEMO

只需要一个小的CSS改变

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

Answer 2

之所以发生这种情况,是因为您绝对将复选框定位在视口上方-20px.当您单击跨度时,您将触发标签以更改复选框,从而导致跳转到顶部.有多种方法可以解决这个问题,但一个简单的方法就是改变:

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

类似于:

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

jsFiddle例子

Answer 3

我明白你的意思

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

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

或者做这件事

#modbutton label input {
    display:none;
}