在 Chrome 中锚定标签 Active Effect？答案

【问题标题】：Anchor tag Active Effect in Chrome?在 Chrome 中锚定标签 Active Effect？
【发布时间】：2014-05-07 09:17:19
【问题描述】：

我正在开发一个应用程序，该应用程序通过将填充有锚标记的列表和容器中每个选项卡的内容包装到可点击选项卡列表中来实现它。这是清单，供参考。此代码输出以下图像。第二张图片是我单击非默认选项卡（即贷款）后在 Chrome 中发生的情况的示例。

我相信 Chrome 正在生成这个蓝色边框作为锚标记的某种活动效果，因为如果我按下任何键或完全单击它就会被删除。蓝色边框也没有出现在 Internet Explorer 10 中。我没有测试过其他浏览器。

有什么办法可以防止这个边框一开始就出现？？我几乎可以肯定它是由 webkit 以某种方式生成的，但我并不精通它，也不太了解它的文档。

    <ul>
    <li><a href="#Borrowers">Borrowers</a></li>
        <li><a href="#Loans">Loans</a></li>
    <li><a href="#Organizations">Funding Sources</a></li>
    <li><a href="#Users">Users</a></li>
    </ul>

Images Illustrating Before and After Click

【问题讨论】：

标签： css google-chrome webkit border anchor

【解决方案1】：

显示该边框以显示焦点。添加以下 css sn-p 以从所有元素中删除焦点轮廓。

*:focus {outline: 0;}

如果您不想消除所有元素的焦点轮廓，而只想消除标签列表，请添加以下内容。

li:focus{outline: 0;}

以快速小提琴为例。

查看示例with focus outline 和示例without focus outline

【讨论】：

谢谢你，我的人。很好的解释。对于其他浏览器，我还应该注意什么，或者说大纲属性是否适用于绝大多数市场份额？