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節點之間的空格。 （盡管無關緊要，但在某些情況下確實如此）

說明：多個空格會折疊成一個空格，但是這個單個字符（這個空格）仍然會占用布局中的某些空間……有時。