16

角が丸くグラデーションで塗りつぶされたボタンのように見せたいリンクがあります。Chrome では問題なく動作しますが、IE では動作しません。

display: inline-block を設定すると、グラデーションが表示されますが、丸みを帯びた角が削除されることがわかりました。IE でこの問題を回避する方法を知っている人はいますか?

JSFiddle でのデモ

HTML:

<a href="" class="button-gold-med">Hello World</a>​

CSS:

a {    
    color: white;
    padding: 8px;

    background: #7db9e8;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
    background: -webkit-linear-gradient(top, #7db9e8, #1e5799);
    background: -moz-linear-gradient(top, #7db9e8, #1e5799);
    background: -ms-linear-gradient(top, #7db9e8, #1e5799);
    background: -o-linear-gradient(top, #7db9e8, #1e5799);
    background: linear-gradient(top, #7db9e8, #1e5799);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0);
    zoom: 1;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
4

3 に答える 3

13

Microsoft フィルターを使用する必要があります。

 filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#7db9e8', endColorstr='#1e5799');

これを IE のフォールバックとして使用してください。ほとんどのバージョンで動作します。

仕様を参照してください:
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

于 2012-06-07T01:54:07.123 に答える
13

この質問はかなり古いことは知っていますが、回答がないため、これが人々を助けることができる場合は、すべての市長ブラウザで線形グラデーションを機能させるための私の解決策を次に示します。

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,     #FFFFFF), color-stop(1, #BDBDBD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #BDBDBD 100%);

この CSS グラデーションを作成するための専用ツールもあります。こちらで確認してください。

http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

于 2014-04-07T19:50:46.553 に答える
1

フィルターを使用する代わりに、いつでも画像を使用してフォールバックできます。

a {
    color: white;
    padding: 8px;

    background: #7db9e8;
    background: transparent url('gradient.png') 0 0 repeat;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
    background: -webkit-linear-gradient(top, #7db9e8, #1e5799);
    background: -moz-linear-gradient(top, #7db9e8, #1e5799);
    background: -ms-linear-gradient(top, #7db9e8, #1e5799);
    background: -o-linear-gradient(top, #7db9e8, #1e5799);
    background: linear-gradient(top, #7db9e8, #1e5799);

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
于 2012-06-07T01:50:37.150 に答える