Internet Explorer 8，向左浮动删除背景色
Internet Explorer 8，向左浮动删除背景色
提问于 2013-03-31 23:24:49
我有一个问题，如何解决在IE8中设置浮动向左时背景颜色被移除的问题：
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<style>
#nav {
margin: 100px auto;
text-align: center;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {此背景颜色: lightblue；将被删除：
background-color: lightblue;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
margin-left: 0px;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
/*display: inline-table;*/
}
#nav ul:after {
content: "";
clear: both;
display: block;
}
#nav ul li {设置向左浮动的....when：
float: left;
}
#nav ul li:hover {
background-color: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#nav ul li:hover a {
color: #fff;
}
#nav ul li a {
display: block;
padding: 5px;
color: #757575;
text-decoration: none;
}
#nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 5px;
color: #fff;
}
#nav ul ul li a:hover {
background-color: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
</style>
</head>这里有一个用于落水菜单的html代码：
<body>
<div id="nav">
<ul>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Web Design</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>谢谢
回答 4
Stack Overflow用户
发布于 2013-03-31 23:36:01
您可以通过使用clearfix类来解决这个问题，如下所述：http://nicolasgallagher.com/micro-clearfix-hack/
如下所示更改您的HTML：
<div id="nav" class="cf"> ... </div>并将这些属性添加到css文件中
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}或者通过向div#nav元素添加宽度
编辑:实际上，您应该对#nav ul element使用上述指示，而不是#nav。
Stack Overflow用户
发布于 2013-03-31 23:40:56
通常，这种行为是由于缺少"Layout“标志造成的-请参阅http://www.satzansatz.de/cssd/onhavinglayout.html
您需要添加#nav ul { zoom: 1.0；}来解决这个问题。
Stack Overflow用户
发布于 2013-04-01 00:26:23
在#nav ul中未为IE设置背景渐变。尝试添加background:#efefef;或
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#000000');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15730971
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号