移除 <a> 链接周围的 Opera Mobile 蓝色边框答案

【问题标题】：Remove Opera Mobile blue border around <a> links移除 <a> 链接周围的 Opera Mobile 蓝色边框
【发布时间】：2011-08-28 03:26:57
【问题描述】：

我有一个 web 应用程序，其中的按钮是使用 <a> 元素创建的，并且都将 href 设置为 #。我想在鼠标单击期间删除 <a> 链接周围的蓝色边框，因为 Opera Mobile 烦人地突出显示所有 <a> 元素，这些元素具有相同的 href 集。

示例图片：

如何删除它？

【问题讨论】：

【解决方案1】：

不是 100%，因为我无法真正测试，但是您是否尝试将 outline: none; 添加到链接的 css 中？您可能需要将其添加到 a:focus 和/或 a:target

哦哦：

空间导航：空间导航是 Opera 的一项功能，其中每个可用于激活的元素是放入一个集合。当用户移动操纵杆或点击特定键，焦点移到下一个集合中的元素。这元素通常突出显示蓝色或黑色边框。链接，表格控件和带有 onclick 的元素处理程序被添加到集合中。

【讨论】：

我现在尝试了（即使使用 !important 规则）（a, a:focus, a:target, a:active { outline: none } ），但 Opera 仍然突出显示所有链接。
我不介意那个蓝色边框（我了解无障碍规则），但它突出显示页面上的每个链接的事实有点烦人。
听起来 Opera 认为这是一个“功能”，所以可能没有任何方法可以禁用它.. 抱歉

【解决方案2】：

试试这个：

a, a:active, a:focus {outline:none}

此外，如果您在 Flash 对象/嵌入方面遇到问题，您可以：

object, embed {outline: 0}

【讨论】：

我现在尝试了（即使使用 !important 规则）（a, a:focus, a:target, a:active { outline: none } ），但 Opera 仍然突出显示所有链接。
试试这个：{outline-offset:-2px;}
试过了，没有效果。也许不可能完全删除它...至少，我希望我可以删除具有相同href 的链接的突出显示。

【解决方案3】：

将 div 与 onclick() 处理程序一起使用，而不是直接使用 <a> 或按钮：例子：在 CSS 中：

#home-send{
background: url(gfx/button.png) no-repeat;}

在页面上：

<div id="home-send" onclick="next('NEXT ACTION');"></div>

点击 DIV 时会发生动作，但没有轮廓边框效果。

希望对你有帮助

【讨论】：

【解决方案4】：

我认为 Opera 可能正在寻找更严格的大纲元素。

试试：

a:focus { outline:0px solid #fff; }

'solid' 和 'color' 将被忽略。

【讨论】：

【解决方案5】：

要删除蓝色边框，请在 CSS 文件的顶部使用它

:focus { outline: 0 solid; }

或

:focus { outline: none; }

【讨论】：

【解决方案6】：

我遇到了同样的问题，这里的答案都没有。但是，我最近找到了一个对我有用的解决方案（但是聚会有点晚了......）。

试试：

:focus{
    outline: 2px solid rgba(0,0,0,0.0);
}

如果这不起作用，您可以更具体地：

a, a:active, a:focus {
    outline: 2px solid rgba(0,0,0,0.0);
}

您需要先实际设置轮廓，然后使其透明。

【讨论】：