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

Question

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

Chrome 输出

在 Chrome 中运行良好。

Click for Larger Image

Safari 输出

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

Click for Larger Image

火狐输出

径向渐变是 DULL

Click for Larger Image

在做跨浏览器平台支持时我有什么遗漏吗？

请有任何建议！任何帮助将不胜感激

请寻找当前版本Code Pen Link 与cmets一起使用

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