IE6下伪类hover失效问题及解决办法

第一篇：

CSS的伪类:hover时，我们发现IE7+为除a标签以外的其他标签也添加了支持，然而IE6下的支持却不尽如人意。在a标签上的应用也常常受到阻碍。有时，为了增加一些简单的动态效果，我们会依赖:hover来实现，比如改变鼠标悬停时链接的文字颜色。代码示例如下：

```css

a:hover {

color: F00;

}

```

这段代码在所有浏览器中都能生效。但如果我们尝试对子元素进行样式处理，比如在em标签内使用a:hover，那么在IE6下可能会出现问题。一个简单的解决办法是额外添加一个a:hover样式，比如设置zoom属性。例如：

```css

a:hover {

zoom: 1;

}

a:hover em {

color: F00;

}

```

看似恢复了正常效果，但我们不禁好奇为何:hover在IE6下会失效。可能是由多种因素造成的，其中可能涉及到haslayout等因素。进一步测试会发现，不论在a:hover中设置哪些属性，哪怕是color、font-size或overflow等常见属性，甚至是虚构的属性，都能使效果恢复正常。这个问题令人困惑，值得我们深入研究。

第二篇：

在IE6下，如果我们直接在a的子标签span上设置hover效果，而不在a:hover中做任何特定设置，那么对span的a:hover span {color:red;}可能会失效。如果我们转而对span的父标签a设置a:hover { }，那么对span的hover设置就会重新生效。举个例子：

```html

需要设置hover的内容

```css部分：

```css

a span {color:red;}

a:hover span {color:blue;}

``` 这种情况下，a:hover span的设置在其他浏览器中都正常，但在IE6下却没有任何变化。原因是IE6解读a的子标签的hover效果是基于父标签的hover设置。换句话说，如果不为父标签设置任何a:hover {}，IE6就会停止对a的子标签hover进行解读，导致在IE6下a:hover设置失效的问题。解决这个问题的方法是对父标签进行简单的a:hover设置，比如设置字体大小。并不意味着需要重复子标签的所有属性设置。例如：

```css

a span {color:red;}

a:hover {font-size:12px;} // 仅对父标签进行简单设置

a:hover span {color:blue;} // 子标签的hover设置仍然有效

``` 现在，你对span的设置已经重新生效了。这个现象背后的原因和解决方法值得我们进一步研究和理解。