<p>元素上tabIndex上的奇怪边框

Question

我目前正试图在大型网站(超过30,000页)上更容易访问某些显示/隐藏内容,并且在添加tabindex时遇到一个奇怪的错误,当点击控件打开时,会出现虚线边框隐藏的内容.

用p标签设置你点击淡入显示隐藏内容的div.我完全无法修改HTML,因为整个网站上有数千个这样的内容,所以这就是我必须要处理的内容.目前添加tabindex我正在使用jQuery动态地执行它,为每个p标记添加一个不断增加的选项卡索引.

我的第一个虽然摆脱这个奇怪的边界是尝试CSS:

#content div.showHide p.showHideTitle:focus, 
#content div.showHide p.showHideTitle::focus, 
#content div.showHide p.showHideTitle::-moz-focus-border {
    outline: 0px !important; border: 0px !important;
}

这适用于Chrome和Safari,但在IE8和Firefox 3.6中,当我点击p标签时,我仍然可以获得边框.有关如何摆脱它的任何建议？

Answer 1

什么是:

#content div.showHide p.showHideTitle {
    outline: none !important; 
}

您正在为伪类设置大纲样式,:focus但这可能是"迟到".这里有一个简单的jsFiddle

Answer 2

我有一个更好的解决方案来解决这个问题，混合 javascript/css。

$('[tabindex]').focus(function()
{
    $(this).css('outline', 'none');
});
$('[tabindex]').keyup(function (event)
{
    if(event.keyCode == 9)
    {
        $(this).css('outline', '');
    }
});

这样，如果您按 Tab 键，它仍然有效，但如果您单击，则无效。

Answer 3

虽然无论如何都不是最有效的 CSS 选择器，但您可以从所有具有 tabindex 属性的 DOM 元素中删除它，只需使用以下 CSS：

[tabindex] {
   outline: none !important;
}