javascript - firefox 与 Chrome 之间的边距顶部是不同的

Question

我在 CSS 中的样式在 Chrome 中运行良好，但与 Firefox 不同。

HTML代码:

<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-on="公開 <div class='toggle_on'></div>" data-off="<div class='toggle_off'></div> 非公開">

这是我的 CSS 代码:

.toggle_on {
    background: #fff;
    padding: 13px;
    float: right;
    margin-top: -5px;
    -moz-margin-top:-25px;
    margin-right: -20px;
    -webkit-box-shadow: 0px 7px 20px -2px rgba(117,112,117,1);
    -moz-box-shadow: 0px 7px 20px -2px rgba(117,112,117,1);
    box-shadow: 0px 7px 20px -2px rgba(117,112,117,1);
    border-radius: 3px;
}

这是 Chrome 中的结果:

还有 Firefox 中的这个:

所以有什么想法吗？？

Answer 1

发生此错误不是因为 CSS，而是因为 HTML 代码:

之前的代码:

<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-on="公開 <div class='toggle_on'></div>" data-off="<div class='toggle_off'></div> 非公開">

并更改为:

<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-on="<div class='toggle_on'></div> 公開" data-off="<div class='toggle_off'></div> 非公開">

它适用于所有浏览器。

谢谢!