1

编辑：焦点环是由Grab And Drag 插件引起的。有关修复，请参阅下面的答案。

每当我点击网页正文的任何​​部分时，Firefox （Pale Moon 27.2.1）都会在浏览器窗口的周边放置焦点环（见截图）。它在每个网页上执行此操作。

多年来，这个问题已经被问了一百万次，但似乎没有一个旧的解决方案可以再工作了。见这里和这里。

我可以告诉你一些有效和无效的事情：

“通配符”选择器删除了具有以下声明的焦点环，但显然会破坏所有网站：

* {
    /* WORKS */
    color: transparent !important;
    text-shadow: 0 0 0 #000 !important;

    /* ALSO WORKS */
    border: 1px solid white !important;
    outline: 2px solid white !important;
    outline-offset: -1px !important;
}

这些选择器不起作用：

:focus
::-moz-focus-inner
:-moz-focusring
:active
:focus
::-moz-focus-outer

这些声明不起作用：

border: 0 !important;
border: none !important;
outline: 0 !important;
outline: none !important;
-moz-outline-style: /* NOPE */;

截屏：

Firefox 中的 Reddit / Google 显示内部焦点环

我正在使用 Stylish 为所有网页设置上述规则 ( @-moz-document url-prefix( "http://" ), url-prefix( "https://"))。我还在使用另一个看起来像这样的 Stylish 规则集，并且适用于其他所有内容：

:active, :focus, ::-moz-focus-inner {
    outline: 0 !important;
}

a:link, a:visited, a:hover, a:active {
    outline: 0 !important;
}

radio * {
    border-width: 0 1px 0 0 !important;
    border-style: dotted !important;
    border-color: transparent !important;
}
4

1 回答 1

0

这可以解决问题，尽管我仍然想知道 Firefox 是什么“着色”？

编辑：焦点环是由Grab And Drag 插件>= v.3.2.* 引起的。对我来说，解决方法是使用 Grab And Drag v.3.1.9.1，当单击并拖动主体时，它不会在网页主体上显示任何焦点环。

@-moz-document regexp( "https?://.*" ) {
    html {
        /**
         * Remove focus rings that appear on the perimeter of the web page
         * body when placing cursor in any form field input, then clicking
         * anywhere in the body.
         *
         * This css rule breaks a lot of websites!
         *
         * - Works on html tag, but not body tag.
         * - Does not work with "outline: 0 !important;" or
         *   "border: 0 !important;"
         * - This declaration is not necessary:
         *   "text-shadow: 0 0 0 #000 !important;"
         */

        color: transparent !important;
    }
}
于 2017-03-25T11:47:44.923 回答