在许多用纯CSS实现效果的时候会用到a标签链接时字元素的样式。比如 CSS制作二级菜单

原因是这样的：由于IE6以下的老浏览器不支持除a元素以外的元素伪类。比如列表的伪类li:hover，所以我们在制作相关效果的时候就必须得用a元素的伪类:hover了。

比如我想实现如下效果：当鼠标移动到a标签时它的子元素span背景为红色。代码如下：

xhtml代码：

<div>
    <a href="#">鼠标移入a标签时span元素背景色应为#ccc边框为#f00
    	<span>
span元素 span元素 span元素 span元素 span元素 span元素
		</span>
    </a>
</div>

css代码：

body { font:12px Verdana, Geneva, sans-serif}

.box {
		width:170px; height:150px; padding:5px;
		border:1px solid #ccc; background:#eee;
	  }
a{
	display:block; width:140px;
	padding:10px; border:1px solid #f00;
 }

a .inner {
			display:block; padding:10px;
			background:#fff; border:1px solid #ccc;
         }

a:hover .inner { background:#ccc; border-color:#f00}

效果预览

理论上这两段代码完全可以达到要求，但在IE中却不能如愿。这是因为在IE里面a:hover的时候元素没有hasLayout(拥有布局)。知道了这一点后就很好解决了。加入任何一条可以激活hasLayout的CSS规则：

a:hover { zoom:1;	/*在a标签的伪类中加入一条可以使元素拥布局的规则*/}

当然zoom属性是通不过CSS验证的，所以你也可以修改成其它的规则只要能激活元素的hasLayout。这儿我给出可以使元素hasLayout的几条CSS规则：

• position: absolute
• float: left 或者 right
• display: inline-block
• width: 任意值
• height: 任意值
• zoom: 任意值 (微软特有属性，不能通过验证)