0

このボタンのデザインでは、線形グラデーションを使用する必要がありますが、カーソルを合わせると、ボタンは単色になります。メイン クラスは次のようになり、テストしたすべてのブラウザーで機能するようです。ご覧のとおり、PIE を使用して、下位の IE ブラウザーでグラデーションが適切に機能するようにしています。

.mvcView.button.texture {
        background-color: #F34914;
        border-width: 0px;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        padding: 4px;

        min-width: 40px;
        overflow:visible;   /*overflow visible is required for ie 7 to respect min-width and doesn't seem to affect other browsers.  */
        width : auto;
        vertical-align: middle;

        font-family: Arial;
        background-color: #F34914;
        background: -webkit-linear-gradient(top, #F34914, #8A2800);
        background: -moz-linear-gradient(top, #F34914, #8A2800);
        background: -ms-linear-gradient(top, #F34914, #8A2800);
        background: -o-linear-gradient(top, #F34914, #8A2800);
        background: linear-gradient(top, #F34914, #8A2800);
       -pie-background: linear-gradient(#F34914, #8A2800);

       behavior: url('/PIE.htc');
}

Webkit ブラウザーの場合、次の css はマウスオーバー時に色をフラットに変更します。

.mvcView.button.texture:hover {
    background: #AA3200;
}

IE9 の場合、ホバーは次の方法でのみ機能します。

.mvcView.button.texture:hover {
    background: #AA3200;
    background-color: #AA3200;
    -pie-background: linear-gradient(#AA3200, #AA3200);

    behavior: url('/PIE.htc');
}

これを行う別のよりエレガントな方法はありますか?

4

3 に答える 3

2

これは PIE のバグのようです。私は同じ問題を抱えています。PIE 動作を css クラスまたは id に割り当てた場合、たとえば既にグラデーションとして定義されているものも#id:hover{background:#some-color;}期待-pie-backgroundされているため、IE を除くすべてのブラウザーで動作するのは正常です。 、PIE はそのために特別に設計されているためです。回避策は、PIE を使用して親のスタイルを設定し (丸みを帯びた角、影、グラデーションを追加)、親の幅と高さを継承する子を追加し、PIE の有無にかかわらずbackground:none;(グラデーションなしで) スタイルを設定することです。次に、子供のために単に.child:hover{background:#some-solid-color;}. したがって、スタイリングしているボタンの場合、通常の場合、定義した親のパイグラデーションで塗りつぶされ、ホバーすると、子が親を「オーバーレイ」(いわば) するため、単色が表示されます。もちろん、これは div やその他の要素を深くネストするときの私のより良い判断に反します。一方、上で投稿した IE9 用のソリューションも同様です (IE 6-8 も)。2つのソリューションのどちらが逆効果であるかはわかりませんが、推測する必要がある場合は、グラデーションのない子を追加する方がよいと思います。

于 2013-10-01T19:57:59.410 に答える
0

グラデーションはある種の画像なので、グラデーションを設定する場合は、このようにすることができます

.button {
    background-image: linear-gradient(#F34914, #8A2800);
}

.button:hover {
    background-image: none;
    background-color: #AA3200;
}
于 2013-09-16T09:55:07.527 に答える