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> 非公開">

它适用于所有浏览器。

谢谢！

Answer 2

第一：欢迎来到网络开发的世界和浏览器之间的差异。

  

    

所以有任何想法??

  

html节点之间可能有空格。 （虽然没关系，但在某些情况下确实如此）

说明：多个空格会折叠到一个空格，但是这个单个空格仍占据布局的某些空间......有时候。