2

2 つの電子スイッチと 2 つのライトを備えたスイッチ ボードを開発しましたが、ブラウザによって結果が異なります。

クロム出力

Chromeではうまく機能しています。

クリックすると拡大画像が表示されます

ここに画像の説明を入力

サファリ出力

ボタンの光沢のあるラベルが下に押されます

クリックすると拡大画像が表示されます

ここに画像の説明を入力

ファイアフォックス出力

放射状グラデーションは DULL

クリックすると拡大画像が表示されます

ここに画像の説明を入力

クロス ブラウザー プラットフォームのサポートを行っているときに、何か不足しているものはありますか?

どんな提案でもしてください！どんな助けでも大歓迎です

探してみてください 現行版コードペン リンク コメント付きです

4

1 に答える 1

2

ラベルの位置とグラデーションを修正 : 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;
}
于 2013-02-02T14:26:34.060 に答える