css - 列表项和下拉列表在 IE8 中变得不稳定

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 及以下”​​特定样式表，创建一个类似不透明度的 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;
  }