CSS Hover 在 IE i 标签中不起作用答案

【问题标题】：CSS Hover not working in IE i tags wrapped in a tagsCSS Hover 在 IE i 标签中不起作用
【发布时间】：2014-01-19 11:56:39
【问题描述】：

我有这些链接，里面的类是这样的

<a href="#"><i class="icon-instagram"></i></a>

现在我已经为它们设置了这样的样式

.top-social-icons a i.icon-instagram{
    background:#DB97BE;
    padding:7px;
    transition-duration:800ms;
    transition-property: width, background;transition-timing-function:ease;
}

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;
}

除了 IE 之外的所有浏览器都可以正常工作，我一直在为此绞尽脑汁。抱歉，如果我第二次在这里发帖时马虎不得。我假设它与包裹在 a 标签中的 i 标签有关？

link to site

【问题讨论】：

记得把css和html例子放在代码块里
谢谢我想知道怎么做
如果有帮助，请将网站链接放在原始帖子中
你能给我们一个链接或jsfiddle吗？这将使我们更容易为您提供帮助。
jsfiddle.net/aYXE7/3 这是您的预期吗？它在 IE11 中运行良好你的问题是什么？背景颜色在悬停时消失

标签： css internet-explorer hover

【解决方案1】：

HTML

 <div class="top-social-icons">
    <a href="#"><i class="icon-instagram">Insta</i></a>
    </div>

CSS

.top-social-icons a i.icon-instagram{
    background:#DB97BE;
    padding:7px;
    transition-duration:800ms;
    transition-property: width, background;transition-timing-function:ease;
}

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;
}

Fiddle Demo

Compatibility browser support for transition effects

【讨论】：

【解决方案2】：

请尝试删除 transition- 属性。你应该声明一次

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    /*transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;*/
}

【讨论】：

【解决方案3】：

就像 Eru 说的，对于非锚标签也添加一个 doctype，但是在这个修改后的 CSS 中是没有必要的：

<!doctype html>

对于现代跨浏览器过渡（可能仅适用于带有过渡的 IE10+）支持：

.top-social-icons a { -webkit-transition: 0.8s ease background, 0.8s ease width;
-moz-transition: 0.8s ease background, 0.8s ease width;
-ms-transition: 0.8s ease background, 0.8s ease width;
-o-transition: 0.8s ease background, 0.8s ease width;
transition: 0.8s ease background, 0.8s ease width; }
.top-social-icons a i.icon-youtube{background:#CB2027;padding:7px}
.top-social-icons a:hover i.icon-youtube{background:none}
.top-social-icons a i.icon-twitter{background:#359BED;padding:7px}
.top-social-icons a:hover i.icon-twitter{background:none}
.top-social-icons a i.icon-facebook{background:#3C5B9B;padding:7px}
.top-social-icons a:hover i.icon-facebook{background:none}
.top-social-icons a i.icon-instagram{background:#DB97BE;padding:7px}
.top-social-icons a:hover i.icon-instagram{background:transparent}

【讨论】：

我只想让背景在悬停时消失

【解决方案4】：

您的 html 页面顶部是否有 <!doctype html> 声明？来自w3Schools，即在as 以外的元素上使用:hover psedoclass 时需要它（您在i 标签上使用它）

注意：在 IE 中，必须为 :hover 声明 <!DOCTYPE> 选择器可以作用于<a> 元素以外的其他元素。

【讨论】：