Question

我创建了一个下拉菜单。列表项目具有rgba背景。为了使IE8兼容，我使用了-ms-filter属性。但是现在IE8中hover的背景和下拉子菜单变得不稳定。

我创建了一个jsfiddle。但不幸的是，似乎jsfiddle不支持IE8。您可以从here

下载html文件

以下是HTML代码：

<div id="side_nav" class="widget inner-box">
    <div>
        <ul>
            <li><a href="#"> Home</a></li>
            <li class="dropdown">
                <a href="#"> About us</a>
                <ul>
                    <li><a href="#">Brief history</a></li>
                    <li><a href="#">Organogram</a></li>
                    <li><a href="#">Vision, mission and strategy</a></li>
                </ul>
            </li>
            <li><a href="#"> Contact us</a></li>
        </ul>
    </div>
</div>

和CSS

#side_nav {
    background: none;
    border: 0 none transparent;
    width: 200px;
}
#side_nav div > ul {
    margin: -15px 0;
    font-weight: bold;
    list-style: none;
}
#side_nav li {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #dfdfdf;
    margin-top: 2px;

    background: none\0/;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFFFF,endColorstr=#33FFFFFF)";
    zoom: 1;
}
#side_nav li:first-child {
    margin-top: 0;
}
#side_nav a {
    text-decoration: none;
    display: block;
    padding: 5px 10px 5px 15px;
}
#side_nav div > ul > li {
    margin-left: -15px;
    margin-right: -15px;
    position: relative;
}
#side_nav div > ul > li:first-child > a {
    padding-top: 8px;
    padding-bottom: 8px;
    background: #666;
    color: #fff;
}
#side_nav div > ul > li.active,
#side_nav div > ul > li:not(:first-child):hover,
#side_nav div > ul > li:hover li {
    border-top-color: #666;
    border-bottom-color: #666;
}
#side_nav div > ul > li.active > a,
#side_nav div > ul > li:hover > a,
#side_nav div > ul > li:hover li a {
    background: rgba(100,100,100,0.8);

    background: none\0/;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000)";
    zoom: 1;
}
#side_nav div > ul > li.active > a,
#side_nav div > ul > li:hover a {
    color: #fff;
}
#side_nav div > ul > li ul {
    display: none;
    margin: 0;
    position: absolute;
    left: 100%;
    top: -1px;
    white-space: nowrap;
    list-style: none;
    padding: 0;
}
#side_nav div > ul > li:hover ul {
    display: block;
}
#side_nav div > ul > li ul li {
}
#side_nav div > ul > li ul a {
    padding-left: 25px;
    padding-right: 25px;
    font-style: italic;
}
#side_nav div > ul > li ul a:hover {
    background: #666;
}

Answer 1

几乎完全相同的情况发生在一个下拉列表中。我要做的就是取出css中的ms-filter，创建一个“IE8 and down”特定样式表，创建一个具有相似不透明度的photoshop png文件，然后使用它。相信我，你会在这条路上挽救一大堆头痛：）

  <!--[if lt IE 9]>
     <link rel="stylesheet" type="text/css" href="css/ie8.css" />
  <![endif]-->

那里的css就是：

 #yourid{
    background: url('../imgs/ie-transparency.png') repeat;
  }

Answer 2

最后，我找到了this解决方案。 rgba.php根据给定的值自动生成半透明的png图像，我可以有条件地为IE8调用它。

.ie8 .widget {
    background: url(../ie8/rgba.php?r=255&g=255&b=255&a=50) repeat;
}

IE8中的列表项和下拉列表变得不稳定

以下是HTML代码：

和CSS

2 个答案: