0

私の問題:表示ブロックとのリンクがあります。すべてがIE9でうまくいきます。しかし、グラデーションを取得するためにフィルターを追加すると、カーソルはボックスの残りの部分ではなく、境界線とテキストだけに手を置きます。

私はjsfiddleで自分のコードをテストしました

私は何か間違ったことをしたかもしれませんか？私のコードは、すべてのブラウザーとバージョンで動作します。明確にするために、他のブラウザのコードを削除しました。

4

3 に答える 3

1

filterIE8で「より良く」動作します。しかし、IE9 の場合は、SVG グラデーションを推奨します。

ここでは、Microsoft の公式SVG グラデーション背景メーカーを見つけることができます。

次のようなものが得られます。

/* SVG as background image (IE9/Chrome/Safari/Opera) */ 
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc);

そして、次の方法でルールに追加できます。

a {
    padding: 3px 5px;
    margin:5px;
    display:block;
    border:1px solid #000;
    background:#FAFAFA; /* fallback for browsers not supporting gradients */
    background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */
    background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */
}

次に、条件付きコメントを使用して、IE8 を再度ターゲットにすることができます。

.ie8 a {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
}

とにかく、完全なクロスブラウザ コードについては、「Visual CSS ツール」をグーグルで検索することをお勧めします。

于 2012-09-14T21:27:51.400 に答える
0

のみ-moz-linear-gradientを使用しており、古いバージョンの Firefox Mozilla でのみ機能します。

IE9 の場合、以下も使用できますCSS3。linear-gradient: { ... }

古いバージョンの Chrome と Safari の場合は-webkit-linear-gradient、Opera-o-linear-gradientと-ms-IE の場合は と を使用する必要があります (ただし、すべてが正常に動作するわけではありません)。

于 2012-09-13T12:53:36.137 に答える
0

a1 つの解決策は、別のファイルでラップしdiv、バックグラウンド プロパティを の代わりに適用することaです。

<div class = "container"><a href="/">Glee is awesome!</a></div>

CSS:

.container {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
    background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
    border: 1px solid #000;
    padding: 3px 5px;
    margin: 5px;
}
a {
    display: block;  
}

ここに小さなデモがあります: little link .

于 2012-09-13T12:55:31.680 に答える