7

角の丸いボタンを作成しましたが、IE9 ではグラデーションの背景が丸くなっていません。

丸ではなく四角

CSSは次のとおりです。

.search button {
    padding: 10px;
    font-family: "OpenSansSemibold", "Helvetica", Arial, sans-serif;
    font-size: 16px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

どうすればこれを修正できますか?

4

2 に答える 2

1

CSS クラスからフィルタースタイルを削除します。

JS フィドルの例

IE8 以下のグラデーションが必要な場合は、別の CSS ファイルを作成し、これでラップする必要があります。

<!--[if lte IE 8]>
[css path here]
<![endif]-->

IE9 では、グラデーション ボタンと角丸ボタンの両方を使用することはできません。実際、Twitter の Bootstrap フレームワークは、IE9 のボタンを丸みを帯びた角のある無地の背景色に劣化させます。

于 2013-03-19T18:31:15.163 に答える
1

IE9 は完全に優れたブラウザーです。問題は古いfilterスタイルを使用していることです。

それらは決して良いものではなく、レガシー サポートの理由から IE9 に実際に残されただけです。非常によく知られているこれを含め、それらには多くの癖があります。

あなたの問題は、IE9 が標準の CSS グラデーションをサポートしていないfilterことです。

さまざまな答えがありますが、最良の答えはCSS3Pieです。

これは、IE9 (および IE6 以降の他のすべての IE バージョン) で標準の CSS グラデーションを使用できるようにする小さな JavaScript ライブラリです。また、とにかくそれらをサポートしていない IE のバージョンに対しても追加border-radiusします。box-shadow

目立たず、他のブラウザーで余分なオーバーヘッドが発生することはありません。

filterCSS3Pie は IE のベクター グラフィックス言語である VML を使用してグラデーションをレンダリングするため、バグの影響を受けません。

本当に Javascript の使用を避けたい場合は、グラデーションを使用して VML または SVG 要素を作成することができます。これは、URI エンコードされた画像を使用して CSS 内で実行できます (例はこちら)。しかし、CSS3Pie に任せた方がはるかに簡単です。

あなたが利用できる他の唯一の解決策は、古い学校の背景グラフィックをロードするか、フォールバックオプションとして無地の背景色を提供することです.

いずれにせよ、フォールバックの無地の色を提供する必要があるかもしれませんが、この問題については、CSS3pie が最善の解決策であることにお金を費やしています。

それが役立つことを願っています。

于 2013-03-19T20:21:48.227 に答える