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 example

Answer 3

我明白了你的意思

请更改输入字段的此代码

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

或做这件事

#modbutton label input {
    display:none;
}