径向渐变和绝对定位在不同的浏览器中产生不同的结果

Question

我开发了一个带有两个电子开关和两个灯的开关板，它在不同的浏览器中产生不同的结果。

Chrome输出

在Chrome中它运行良好。

Click for Larger Image

Safari输出

按钮的闪亮标签被推到底部

Click for Larger Image

火狐输出

径向渐变是DULL

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;
}