Question

我正在项目中使用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>

非常感谢任何帮助。

Answer 1

尝试更改顺序，以便后退在实际声明之后。

#icon:hover {

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

}

Twitter Bootstrap Glyphicons在IE8及以下版本中部分不透明

1 个答案: