我创建了一个下拉菜单。列表项目具有rgba
背景。为了使IE8兼容,我使用了-ms-filter
属性。但是现在IE8中hover
的背景和下拉子菜单变得不稳定。
我创建了一个jsfiddle。但不幸的是,似乎jsfiddle不支持IE8。 您可以从here
下载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>
#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;
}
答案 0 :(得分:0)
几乎完全相同的情况发生在一个下拉列表中。我要做的就是取出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;
}
答案 1 :(得分:0)
最后,我找到了this解决方案。 rgba.php
根据给定的值自动生成半透明的png图像,我可以有条件地为IE8调用它。
.ie8 .widget {
background: url(../ie8/rgba.php?r=255&g=255&b=255&a=50) repeat;
}