IE7下absolute定位的hover伪类元素的一个小问题
想仿照新浪微博做一个上面的导航条(toolbar),就是鼠标移上去,就能显示面板那种.就像这样
http://dl.iteye.com/upload/picture/pic/121441/ede285e2-10b8-34c9-b7e6-4b557a95740b.jpg
不想用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>.
页:
[1]