1

画像を避けるために斜めの開始点を持つ均等に色付けされた要素を持つ CSS ソリューションを見つける途中で、この単純な例に出くわしました: http://dabblet.com/gist/1780333。これは、最新の IE でも正常に動作していますが、Safari だけが完全に反転し、最初ではなく最後に配置し、部分的に角度を変えています。少なくとも私のライブ サイトでは一貫性がありません。もちろん、すべてのブラウザ バージョンで同じ値を使用しています。

なぜそうなのか、何ができるのか、または要素の左側を斜めにするための画像なしの代替ソリューションを考えている人はいますか?

4

2 に答える 2

1

バグを見つけたと思います！または、少なくとも Safari は角度を別様に解釈しています。

ごく最近まで Safari-webkit-gradientは柔軟性の低い構文を使用していたため、これは驚くべきことではありません。たとえば、角度は許可されません。

それでも、まだ機能する古い構文を含めることで問題を解決できます。

  background: -webkit-gradient(linear, 10% 100%, 0% 0%, color-stop(80%, #000000), color-stop(80%, transparent));
  background: -webkit-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: -moz-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: -o-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: linear-gradient(60% 100%, #000000 80%, transparent 80%);

デモ

于 2013-03-30T18:35:59.070 に答える