IE9:悬停故障

Posted

技术标签:

【中文标题】IE9:悬停故障【英文标题】:IE9 :hover Glitch 【发布时间】:2011-12-05 17:14:18 【问题描述】:

我在 IE9、:hover 和 CSS 背景属性中出现了一些非常奇怪的行为。

就好像悬停和非悬停属性在不应该交换时交换(换句话说,悬停属性变成了非悬停属性)。我只使用背景颜色和 SVG 渐变进行测试。这是测试代码(SVG 代码被注释掉了)。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .highlights            
        background:black;

        /* SVG background gradient for #0791F3 to #068CE0 */    
        /*
        background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwNzkxRjMiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwNjhDRTAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czMDkpIiAvPgo8L3N2Zz4=);
        */

    


    .highlights:hover 
        background:gray;

        /* SVG background gradient for #0064ff to #0051ff */
        /*
        background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc0NDEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwMDY0RkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDUxRkYiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c0NDEpIiAvPgo8L3N2Zz4=);
        */

    

</style>
</head>
<body>

<div class="highlights">
    <h3 class="title" style="color:#FED704">The Quick Brown Fox Jumps Over The Lazy Dog</h3>
    <p style="color:white;">This is smaller text</p>
</div>

</body>
</html>

[编辑]:奇怪行为的视频(记住,悬停时背景应该显示为灰色):http://www.youtube.com/watch?v=8D4Oj25bPlg

【问题讨论】:

这对我来说是正确的,无论是纯色还是 SVG 渐变。 jsfiddle.net/FGqZe 通过该 web 应用程序似乎可以正常工作,但当它是本机 htm 文件时则不行。 我已经更新了 IE。我现在得到了版本 9.0.8112.16421(更新版本 9.0.3)。它仍在正常工作...... 此处版本相同。你有哪些类型的插件/插件/加速器?我只启用了 adobe flash、adobe pdf helper、java、spybot SD-IE 保护和经典资源管理器栏。 长列表。我禁用了所有。没有变化。 【参考方案1】:

未启用软件渲染。一旦我启用它,问题就消失了。

Internet 选项 > “高级”选项卡 > 勾选“使用软件渲染而不是 GPU 渲染”

【讨论】:

以上是关于IE9:悬停故障的主要内容,如果未能解决你的问题,请参考以下文章

css IE9空和透明元素:悬停bug解决方法

IE9 和 Z-index:元素在悬停时消失在父级后面

css上的奇怪故障悬停在链接上

按钮:悬停在 Firefox 中不起作用

Chrome 悬停错误 - 可能是固定位置,或第 n 个子原因

如何在 IE 中覆盖 Twitter Bootstrap 下拉悬停