1

グラデーションと境界線の半径を使用してIEでボタンのスタイルを設定しようとすると、グラデーションが背景に適用されるため、角が効果的に四角くなることがわかります。

他のすべてのブラウザーは、これを問題なく処理できるようです。

これを FireFox で開くと、ここ でデモを行いました。たとえば、これを Internet Explorer で開くと、角が丸く、境界線内にグラデーションが表示されます。

明らかに、効果を明確にするために半径などを誇張しています。次の CSS を使用します。

.form_Wrapper{
    width: 250px;
    height: 250px;
    background-color: #32b1d2;
}

.form_Submit{
    /*positioning*/
    position: absolute;
    top: 100px;
    margin-left: 16px;
    margin-top:20px;
    padding: 3px 10px;
    width: 90px;height:40px;
    /*background*/
    background: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#a5a5a5), to(#808080));
    background: -webkit-linear-gradient(top, #a5a5a5, #808080);
    background: -moz-linear-gradient(top, #a5a5a5, #808080);
    background: -ms-linear-gradient(#a5a5a5, #808080);
    background: -o-linear-gradient(#a5a5a5, #808080);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5a5a5', endColorstr='#808080');
    zoom: 1;
    /*border*/
    border: 2px solid #a5a5a5;
    border-color: #a2a2a2;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    /*text*/    
    opacity: 1.0;        
    color: #fff;
}
​

境界線を含む背景ではなく、境界線の内側の領域にグラデーションを適用するには、いくつかのトリックが必要です。しかし、私はこれに対する解決策を研究することができませんでした。

4

3 に答える 3

3

-ms-linear-gradientIE は IE9 の独自のフィルターから IE10 の標準linear-gradientに直接スキップするため、何もしません。

独自のフィルターは、背景とまったく同じようには動作しません。他の CSS プロパティと必ずしも相互作用することなく、要素全体に作用するだけです。

CSSPIE は、CSS サポートの欠如に対する VML (SVG と同様) の回避策を提供します。多くの要素で使用すると、パフォーマンスが低下する可能性があります。

イメージを使用することもできますが、メンテナンスが面倒です。色を変えたいですか？イメージを再作成する必要があります。また、エンド ユーザーは、変更されるたびにイメージ ファイルを再ダウンロードする必要があります。小さいかもしれませんが、目立つちらつきです。

要点: 最も単純で、最もクリーンで、髪を抜くのが最も少ない解決策は、CSS3 に準拠していないブラウザーにフォールバック単色を提供することです。MS が語る「より美しいウェブ」を求める人は、これらのハッキングを必要とするブラウザではなく、それを本質的にサポートするブラウザを使用するでしょう。

于 2012-11-22T15:56:50.057 に答える
1

問題は背景のグラデーションではないようですが、具体的にはフィルターを使用していることです。フィルターは、同じことを実現する独自の IE css プロパティですが、背景のようには動作しません。

残念ながら、IE は IE10 以降 ( source ) のグラデーションしかサポートしていないため、画像 (動作しますが、CSS ほどクールではありません) またはCSS3pie (動作させるのが難しい場合もありますが、うまく機能します) を使用する必要があります。 !)。

実際の例を確認するために、 http: //denkeensna.nl で CSS3 パイを使用しました。これは、IE、IE7 でグラデーション + 境界線の半径を適切に処理します。

于 2012-11-22T15:37:00.463 に答える
0

CSS グラデーションを作成する代わりに、背景の画像を作成し、その画像を背景にすることをお勧めします。そうすれば、すべてのブラウザで同じ背景を取得できます。画像の境界を丸くすることもできます（そして角を透明にして、として保存します.png）、丸みを帯びた角がIE8未満で見えるようにします

次のいずれかを作成します。

  • 幅が 1 または 2 ピクセルの画像を水平方向に繰り返し、
  • またはボタン全体の画像（角が丸くなっている可能性があります）
于 2012-11-22T15:31:30.507 に答える