Firefox CSS錯誤（在Chrome中正常運行）

我遇到了一個問題，下面的代碼在Chrome中正常工作，但它不在Firefox中。Firefox CSS錯誤（在Chrome中正常運行）

<div id="client-controls"> 
<p style="margin-left: -90px;"><b>DHCP (?)</b></p> 
<input type="checkbox" name="uncheckdhcp" id="uncheckdhcp" onclick="return uncheckdhcp();" checked/>

#client-controls html { 
    background-color: #e4ded4; 
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); 
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.1); 
    height: 100%; 
} 
#client-controls input[type="checkbox"] { 
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), 
         -webkit-linear-gradient(left, #f66 50%, #088A08 50%); 
    background-size: 100% 100%, 200% 100%; 
    #background-position: 0 0, 15px 0; 
    border-radius: 25px; 
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5), 
       inset 0 0 10px hsla(0,0%,0%,.5), 
       0 0 0 1px hsla(0,0%,0%,.1), 
       0 -1px 2px 2px hsla(0,0%,0%,.25), 
       0 2px 2px 2px hsla(0,0%,100%,.75); 
    cursor: pointer; 
    height: 30px; 
    left: 0%; 
    #margin: -12px -37px; 
    padding-right: 0px; 
    #position: left; 
    top: 50%; 
    margin-top: -20%; 
    margin-left: -100px; 
    width: 80px; 
    -webkit-appearance: none; 
    -webkit-transition: .25s; 
align:left; 
float:left; 
} 
#client-controls input[type="checkbox"]:after { 
    background-color: #eee; 
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1)); 
    border-radius: 25px; 
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1), 
       inset 0 -1px 1px 1px hsla(0,0%,0%,.25), 
       0 1px 3px 1px hsla(0,0%,0%,.5), 
       0 0 2px hsla(0,0%,0%,.25); 
    content: ''; 
    display: block; 
    height: 100%; 
    left: 0; 
    #position: relative; 
    top: 0; 
    width: 25px; 
} 
#client-controls input[type="checkbox"]:checked { 
    background-position: 0 0, 80px 0; 
    padding-left: 50px; 
    text-align: left; 
    content-align: left; 
    padding-right: 0; 
}

請有人可以讓我知道我錯了，或許有什麼需要改變？

PS：此代碼用於滑動切換按鈕，它顯示在chrome中，FF顯示的只是一個帶陰影背景的複選框。 Thankyou。

來源

2015-10-16 user156235

當你沒有實際顯示任何輸出時，你不應該添加*代碼段*。單獨使用CSS，代碼片段將不會顯示任何內容。因此它是無用的，你應該只使用代碼標籤，而不是代碼片段。更好：使用片段選項，但添加一些HTML來顯示問題。現在我們必須猜測出現問題的地方。（但正如答案所示，這可能是由於供應商的前綴 - 也可能是因爲你做了一些奇怪的事情，例如'#position：left'。 –

您的代碼示例中充滿了錯誤。無論如何，您需要爲我們提供一些HTML以便與CSS一起使用，以便讓我們瞭解您想要實現的目標。 –

僞元素不能用於表單輸入。 '＃客戶端控制輸入[類型=「複選框」]：在此行之後不應該在任何瀏覽器中工作。編輯：您可以將複選框包裝在容器中，並在該div上使用僞元素。 – shirfy

你有沒有嘗試添加-moz前綴，你有-webkit前綴？

來源

2015-10-16 23:04:50 Mike

它似乎適用於此，它只是沒有出現的灰色切換。 – user156235

任何人都可以插入邁克說的話？ – user156235

Firefox CSS錯誤（在Chrome中正常運行）

回答

相關問題