我开发了一个带有两个电子开关和两个灯的开关板,它在不同的浏览器中产生不同的结果。
铬输出
在 Chrome 中它运行良好。
Safari 输出
按钮的闪亮标签被推到底部
火狐输出
径向梯度是 DULL
在做跨浏览器平台支持时我有什么遗漏吗?
请有任何建议!任何帮助将不胜感激
请寻找当前版本代码笔链接 它带有评论
固定标签位置和渐变: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;
}