选项卡时如何从 Firefox 中的 iframe 中删除虚线轮廓答案

【问题标题】：How to remove dotted outline from iframe in Firefox when tabbed选项卡时如何从 Firefox 中的 iframe 中删除虚线轮廓
【发布时间】：2013-09-12 20:12:24
【问题描述】：

是否可以从 Firefox 中的 iframe 中删除虚线轮廓？

在 CSS 中设置大纲属性不起作用。

HTML：

<iframe width="50" height="50"/>

CSS：

iframe { outline: 0 }

这是一个重现此问题的 jsfiddle。 http://jsfiddle.net/6sHkw/1/

编辑

抱歉各位，我的问题不清楚。

使用上面的 jsfiddle，如果您切换到 iframe，则会出现虚线轮廓。我想让它在您点击它时不会出现虚线轮廓。 border: 0 和 frameborder=0 都不起作用。

【问题讨论】：

对任何类型的轮廓的贡献最大的 2 个 - 轮廓和边框，有时是框阴影
outline/border/frameborder 在 Firefox 中选择 iframe 时显然不起作用。您能否详细说明 box-shadow 如何对虚线产生影响？
不是虚线，但它给 textarea 一个边框外观，至少对于 FF 来说，可能也在其他一些元素上，但我只接触过 textarea
似乎没有办法删除 FF 上的选项卡焦点轮廓。虽然我不会担心这个小轮廓，但老实说，我从来没有在 iframe 中添加标签
遇到同样的问题，我找不到禁用它的方法。

标签： html css firefox iframe

【解决方案1】：

添加以下内容

iframe {
    border:0px;
}

jsFiddle 适用于所有浏览器。

fiddle 将是空白的，因为 iframe 中没有 src。

【讨论】：

感谢您的回答。不幸的是，当您选择 iframe 时，border: 0 不起作用。这只发生在 Firefox 中。关于为什么会发生这种情况的任何线索？
@KenHirakawa 这就是它在 FF 中的样子.. 'tab' 是什么意思.. i.stack.imgur.com/ATdHH.png
@JoshC 他的意思是打开小提琴并按下制表符，当您从制表符专注于 iframe 时，它有一个轮廓

【解决方案2】：

虚线焦点轮廓位于 iframe 内的文档中，而不是 iframe 本身。您也可以在主浏览器视口中看到相同的内容。

我不相信您可以通过样式将其关闭。这是一个可访问性功能：如果人们使用标签导航，则假设他们希望实际查看他们在标签顺序中的位置。否则它很快就会完全无法使用。

【讨论】：

【解决方案3】：

您也可以从标记中设置它（iframe 有一个frameborder 属性）

<iframe width="50" height="50" frameborder="0"/>

Working Fiddle:

注意： HTML5 不再支持此功能，因此请改用 CSS 样式（与其他答案一样）

【讨论】：

谢谢 avrahamcool。我已经尝试过 frameborder，但如果您选择 iframe，这将不起作用。