:focus 在 IE 中无法按预期工作答案

【问题标题】：:focus not working as expected in IE:focus 在 IE 中无法按预期工作
【发布时间】：2015-11-12 06:28:24
【问题描述】：

我在处理过的聊天后调查窗口上有一个关于可访问性的问题。右上角有一个关闭按钮（作为 X 的图像），我现在通过放置焦点伪类来包含视觉焦点我面临的问题是关闭按钮在聚焦时周围有白色边框，这在 chrome、Mozilla 中按预期发生，但在 IE 中出现蓝色边框。有人可以帮我去掉这个蓝色边框并用白色代替吗？

我正在分享我使用过焦点的代码 sn-p

a.close-link:focus {
    outline: 1px dotted white;
}

【问题讨论】：

它应该可以正常工作。您正在测试哪个 IE 版本？ IE a 上对:focus 有片状支持。
搞笑标题，笑死我了！ XD

标签： css internet-explorer

【解决方案1】：

虽然 active 和 focus 是不同的状态，但我认为你可以同时尝试两者来达到你的目的

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

关注来源http://www.w3schools.com/CSS/css_pseudo_classes.asp

a.close-link:focus, a.close-link:active {
        outline: 1px dotted white;
    }

【讨论】：

【解决方案2】：

:FOCUS 伪类确实在 IE 中工作，相反，我相信您的问题出在 outline 属性上。

试试这个：

IE 9

George Langley 写信说 IE 9 显然不允许你使用删除链接周围的虚线轮廓，除非您包含此元数据标签：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

^((source))

【讨论】：

【解决方案3】：

好吧，我找到了一种解决方法。因为 IE9 的边框是默认的，所以我现在已经移除了边框，蓝色的轮廓也没有了！

    a.close-link:focus {
        outline: 1px dotted white;
    }

    a.close-link img {
        border: none;
    }

【讨论】：