0

CSS：

.silver {
color: #636363;
border: solid 1px #9C9C9C;
background: #D6D6D6;

/*important part*/
background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#BABABA));
background: -moz-linear-gradient(top,  #E8E8E8,  #BABABA);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bababa')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bababa');

padding: 2px 5px 2px 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 5px;
font-size: 95%;
}

これは、クラスに入力/送信ボタンに適用すると機能しますが、クラスをスパンまたはdivに適用するとグラデーションが表示されません。IE9でグラデーションを機能させるにはどうすればよいですか？

4

2 に答える 2

1

IE9がリリースされたとき、それはIEの新たな夜明けを告げるはずでした。他の誰もが何年もサポートしてきたすべての新しい光沢のあるブラウザ機能をサポートするバージョン。

幸いなことに、ほとんどの場合、これに成功しました。

悪いニュースは、CSSグラデーションに関しては彼らがボールを落としたことです。IE9はそれらをサポートしていません。filterただし、プロパティを介してグラデーションを機能させるための古いIE6/7/8ハックもサポートしていません。

解決策があります。SVG画像を背景にレンダリングできます。つまり、グラデーションを使用してSVGを作成するだけで、並べ替えることができます。しかし、待ってください、それはそれほど単純ではありません。IE8やその仲間をサポートするためのfilterプロパティがある場合、SVGトリックをIE9で機能させるには、実際にそれを取り除く必要があります。

この時点で、すべてが少し複雑になります。条件付きコメント、IEのバージョンごとに分けられたスタイルシート、または問題をハッキングする他の方法が必要です。

または、CSS3Pieを使用できます。これは、IEのさまざまなバージョンに多数のCSS機能のサポートを追加する小さなJavascriptユーティリティです。それらの機能の1つは、CSSの背景グラデーションです。

CSS3Pieを使用すると、標準のCSSbackgroundプロパティを使用するだけで、グラデーションは他のブラウザーとまったく同じようにすべてのIEバージョンで機能します。

これは、6から9までのIEのすべてのバージョンで機能するため、前述のSVGハックをいじる必要がないことに加えて、その厄介なfilterスタイルを削除することもできます。そのすべてのラウンドの勝利。私はあなたのための解決策としてそれをお勧めします。

ただし、IE9用のSVGグラデーションを使用して、難しい方法で実行したい場合は、CSSコードを生成するサイトへのリンクを次に示します。http：//www.colorzilla.com/gradient-editor / [IE9をサポート]チェックボックスをオンにすると、必要なコードが表示されますが、同時に表示される警告テキストと詳細な手順にも注意してください。

お役に立てば幸いです。

于 2012-10-29T22:56:22.900 に答える
0

これは正しくないhtmlです：

<input type='submit' class='silver'>buttons</input>

入力タグは自己終了タグで<input />あるため、内部にデータを含めることはできません。

<input type='submit' class='silver' value="buttons" />

または、この目的でボタンタグを使用できます

<button class='silver'>buttons</button>
于 2012-10-29T22:25:48.397 に答える