`
kabike
  • 浏览: 599388 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

IE7下absolute定位的hover伪类元素的一个小问题

    博客分类：
  • html
htmlcss 
阅读更多
想仿照新浪微博做一个上面的导航条(toolbar),就是鼠标移上去,就能显示面板那种.
就像这样


不想用js脚本搞来搞去,打算直接用hover伪类来着.
每个弹出的面板是absolute定位的,结果发现IE7下鼠标一从面板的文字(即"我的首页弹出层"这几个字)上面移开,面板马上消失的无影无踪.后来给面板加上了白色的背景色才正常了起来 
background-color: white;



和这位老兄遇到的问题很有相似之处啊
http://hi.baidu.com/1b1b1/item/f10d301919e07709e75c366b

代码放这里备忘,反正是各种浏览器不兼容..... 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部固定菜单</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

.nav-wrapper-fixed {
	position: fixed;
	top: 0;
	width: 100%;
	height: 25px;
	background-color: #3FA7CB;
}

.nav-wrapper-fixed .item {
	width: 100px;
	height: 25px;
	float: left;
}

.nav-wrapper-fixed .item:hover {
	background-color: white;
}

.nav-wrapper-fixed .item:hover .panel {
	display: block;
	background-color: white;
}

.nav-wrapper-fixed .panel {
	width: 300px;
	height: 200px;
	position: absolute;
	top: 25px;
	left: 0px;
	display: none;
	border-style: none solid solid solid;
	border-color: green;
	border-width: 1px;
}

.nav-wrapper-fixed .nav {
	width: 500px;
	position: relative;
	margin: 0 auto 0 auto;
}

.main {
	margin-top: 50px;
}
</style>
</head>
<body style="height: 2000px;">
	<div class="nav-wrapper-fixed" id="navFixed">
		<div class="nav" id="nav">
			<div class="item">
				<span>个人中心</span>
				<div class="panel">个人中心弹出层</div>
			</div>
			<div class="item">
				<span>我的首页</span>
				<div class="panel">我的首页弹出层</div>
			</div>
			<div class="item">
				<span>应用</span>
				<div class="panel">应用弹出层</div>
			</div>
		</div>
	</div>
	<div class="main">
		<ul>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
			<li>all kinds of crap</li>
		</ul>
	</div>
</body>
</html>
.

分享到：
| 浮动(float)与文档流(normal flow)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics