`
kabike
  • 浏览: 610760 次
  • 性别: 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)
评论
发表评论

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

相关推荐

    ie特有bug文档

    **Hover伪类与Position: Absolute元素问题** - **问题描述**：在IE7中，`:hover`伪类无法更改具有`position: absolute`属性的子级元素的`left`和`top`值。 - **解决方案**： - 将`left`和`top`值设置为除0%之外的...

    纯CSS的下拉菜单,支持IE6,IE7,Firefox

    由于IE6和IE7不支持某些CSS特性，如`:hover`伪类应用到非`&lt;a&gt;`元素上，所以我们需要进行一些调整。可以使用JavaScript或jQuery来解决这个问题，但这里我们只使用CSS。 1. 对于IE6和IE7，我们可以使用`&lt;a&gt;`元素包裹...

    纯div+css下拉菜单支持ie6，ie7、火狐

    4. `hover`伪类：当鼠标悬停在元素上时应用的样式，常用于触发下拉菜单的显示。 5. **浏览器兼容性**：针对不同浏览器，尤其是老版本的IE，可能需要使用CSS Hack或条件注释来解决兼容性问题。 6. **过渡效果...

    纯csshover3.htc网上商城左侧垂直商品分类二级菜单

    在二级菜单中，`:hover`伪类被用来在鼠标悬停时显示或改变一级菜单下的子菜单。这种响应式设计可以提供更好的用户体验，因为用户无需点击，只需将鼠标移动到相应的类别上，就能看到下级的分类。 在"纯csshover3.htc...

    IE6 -- IE8浏览器CSS兼容性查询手册【gif格式】

    5. 定位（Positioning）：IE6对绝对定位（absolute positioning）和相对定位（relative positioning）的支持有限，可能会导致元素位置偏移。使用`position: fixed;`在IE6中无效，需要使用技巧如`expression`脚本或...

    前端面试题，包含了基础的css和vue原理面试题，带答案

    伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树之外的元素。 4. CSS position 定位 CSS position 定位有四种：relative、absolute、fixed 和 static。 相对定位（relative）：相对于自身位置...

    纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar

    - **CSS伪类**：`:hover`伪类通常用于在鼠标悬停时显示下拉菜单，但在IE6和7中，这个伪类只适用于链接元素。为解决此问题，可以创建一个隐藏的`&lt;a&gt;`标签，然后使用JavaScript添加或移除类来模拟`:hover`效果。 - *...

    全面的IE6_7_8_FF样式兼容

    - IE6 有一个著名的双倍边距问题，当使用 `position:absolute` 且有边距时，边距会被计算两次。 - FF 的表现更符合 W3C 规范，但可能需要额外的负边距调整。 - 使用 `display:inline-block` 或 `display:block` ...

    纯css二级导航 兼容ie6

    2. **伪类选择器**：CSS中的伪类选择器如`:hover`、`:active`和`:focus`，能帮助我们实现动态效果，如鼠标悬停时改变背景色或边框。在IE6中，`:hover`仅适用于链接元素，但可以通过特定技巧应用于其他元素。 3. **...

    css下拉菜单示例，兼容ie678,ff,chrome

    - **IE6、IE7**：这两个版本的浏览器不支持CSS的`:hover`伪类在非`&lt;a&gt;`元素上使用，所以通常需要借助JavaScript或`&lt;a&gt;`标签包裹`&lt;li&gt;`来实现下拉菜单的触发。 - **IE8**：虽然IE8支持`:hover`，但不支持`:nth-...

    二级下拉菜单(支持IE6)

    2. **兼容性处理**：对于不支持CSS hover伪类的IE6，JavaScript可以模拟悬停效果，确保菜单的正常工作。 3. **交互增强**：JavaScript还可以实现其他交互功能，如动画过渡、延迟显示等，提升用户体验。 **四、实际...

    纯css多级下拉菜单兼容ie6+主流浏览器

    IE6不支持`:hover`伪类在非链接元素上，但可以通过为父元素添加`hover`状态来解决这个问题。 4. **定位**：下拉菜单通常需要相对于其父元素进行绝对定位（`position:absolute;`）。通过调整`top`和`left`属性，可以...

    前端面试题汇总1

    12. **a:hover img的CSS伪类问题**：在IE6下，`a:hover img`的CSS规则无法改变图片宽度，但在IE7和Firefox中有效。可以使用JavaScript或jQuery进行兼容处理。 13. **非链接的`:hover`状态**：IE6不支持`div:hover`...

    DIV CSS最有可能遇到的八个面试问题

    **问题背景**：`hover` 是一个常用的CSS伪类，用于定义元素在鼠标悬停状态下的样式。然而，在不同的浏览器中，`hover`的行为可能有所不同，尤其是在Internet Explorer 6 (IE6) 中。 **解析**： - **CSS 选择器顺序*...

    尚硅谷_前端_面试题

    - **CSS选择符**：包括类型选择符、类选择符、ID选择符、属性选择符、伪类选择符、伪元素选择符、组合选择符等。 - **可以继承的CSS属性**：如`color`、`font-size`、`font-family`等，但`padding`、`margin`、`...

    阿里前端基础分享-元泉

    - **hasLayout** 是一个IE专有的概念，用于描述元素是否具有自己的布局，从而影响元素的尺寸和定位。 - 在IE早期版本中，所有元素都可能触发 `hasLayout`，这导致了较大的性能开销。 - 后来，IE只允许部分元素触发...

    用hover配合(纯css)position实现网页动态展示效果

    `hover`伪类是CSS中用于定义元素在鼠标悬停时的状态，它允许我们在不依赖JavaScript的情况下，仅通过CSS改变元素的样式。例如，在示例代码中，当鼠标悬停在`a`标签上时，背景颜色会从绿色变为红色，同时触发一个隐藏...

    前端 60 道面试题及答案.docx

    * 元素和伪元素 * * * 继承 * 默认 CSS新特性： * transition:过渡 * transform:旋转、缩放、移动或者倾斜 * animation:动画 * gradient:渐变 * shadow:阴影 * border-radius:圆角 行内元素和块级元素： * 行内...

    CSS基础知识.docx

    * absolute（绝对定位）：参考距其最近一个不为 static 的父级元素通过 top, bottom, left, right 定位 * fixed（固定定位）：所固定的参照对像是可视窗口 七、CSS3 新特性 CSS3 中新增了许多新特性，例如： * ...

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