徑向漸變和絕對定位在不同的瀏覽器中產生不同的結果

Question

我開發了一個帶兩個電子開關和兩個燈的開關板，它在不同的瀏覽器中產生不同的結果。

Chrome輸出

在Chrome中，它運行良好。

Click for Larger Image

Safari的輸出

按鈕的光澤標籤被推向底部

Click for Larger Image

火狐狸輸出

的徑向漸變平淡

Click for Larger Image

是有我而做跨瀏覽器平臺的支持錯過任何東西嗎？

請提出任何建議！任何幫助將高度讚賞

敬請期待當前版本Code Pen Link它與評論

Answer 1

固定標籤位置和梯度：Code Pen Demo

要解決該標籤的位置，使用top代替margin-top。

.switch:before { /* Used for Inner Ligths of switch */ 
    content: "";/* Without this no layout positioning will work */ 
    background: rgb(53, 244, 252);/* Sandy white color */ 
    width: 36%;/* occupied 36% of switch (which is 50% of board frame */ 
    position: absolute; 
    height: 4px;/* Light height */ 
    margin-top: 0%;/* 36% width + 32 % left border + 32% right border = 100% of switch width */ 
    top: 77%; 
    margin-left: 32% ; 
    margin-right: 32% ; 
    marging-bottom :0px; 
    border-radius: 12px;/* Light radius */ 
    box-shadow: inset 0 0 1px rgba(0,0,0,.2);/* Switch light shadow */ 
    border: 1px solid rgba(0,0,0,.1);/* Switch Light border */ 
} 

.on.switch:before {/* Used to target light of switch */ 
    margin: 0% 32% 8%; /* Move light of switch up so it appears that light is actually on */ 
    top: 70%; 
    background: rgba(255, 255, 255, 0.42); 
} 

問題不在於Safari或Chrome，而是Firefox沒有正確處理margin-top百分比。我嘗試設置margin-top: 100%，只有Safari和Chrome（Mac版本）在交換機下方顯示標籤。 Firefox確定100％小於交換機的全高。

至於Firefox中的漸變，只需將行radial-gradient移動到頂部並將-moz-radial-gradient保留在底部。這將允許瀏覽器特定的CSS生效。

.radial:before{ 
    content:""; 
    position:absolute; 
    top:-240px; 
    /* width: 1200px;*/ 
    /*max-width: 100%;*/ 
    width:100%; 
    height: 920px; 
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 1%,rgba(255,255,255,0.15) 2%,rgba(255,255,255,0) 56%,rgba(255,255,255,0) 100%); 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05 ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%); 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05 ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%); 
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%); 
    z-index: -21; 
}