Twitter Bootstrap Glyphicons partial opacity in IE8 and below

Question

I'm using Twitter Bootstrap 's glyphicons in a project and want them to become partially transparent on :hover. Of course everything works as expected in Chrome, FF, Safari and even in IE9+.

In IE7 and IE8 however, the opacity makes the icons look horrible. Below are the essentials for testing:

<!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>

Any help would be greatly appreciated.

Answer 1

Try changing the order around so that the fallbacks are after the actual declaration.

#icon:hover {

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

}

Twitter Bootstrap Glyphicons partial opacity in IE8 and below

Question

1 answers

solution1
0 2013-02-05 12:25:15

Twitter Bootstrap Glyphicons partial opacity in IE8 and below

Question

1 answers

solution1 0 2013-02-05 12:25:15

solution1
0 2013-02-05 12:25:15