1

プロジェクトでTwitter Bootstrapのグリフィコンを使用しており、:hover で部分的に透明にしたいと考えています。もちろん、すべてが Chrome、FF、Safari、さらには IE9+ でも期待どおりに機能します。

ただし、IE7 および IE8 では、不透明度によってアイコンがひどく見えます。以下は、テストに必要な要素です。

<!doctype html>
<html>
    <head>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <style>
            #icon {
                margin: 50px;
            }

            #icon:hover {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
                filter: alpha(opacity=70);
                opacity: 0.7;
            }
        </style>
    </head>
    <body>
        <i id="icon" class="icon-search"></i>
    </body>
</html>

どんな助けでも大歓迎です。

4

1 に答える 1

0

フォールバックが実際の宣言の後にあるように、順序を変更してみてください。

#icon:hover {

opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

}
于 2013-02-05T12:25:15.507 に答える