Firefox 覆盖样式的 html 选择选项

Question

好的，这已经让我烦恼了一段时间，我不知道是什么原因造成的。我想知道是否有其他人遇到此问题或注意到此问题。

在我的 css 中，我的 html 选择选项的样式看起来与此类似

在某些计算机上，它看起来像我的样式，而在某些计算机上，它似乎覆盖了样式，然后看起来像这样

到目前为止，一些事实有助于确定造成这种情况的原因。 我测试过的所有计算机都在运行 Windows 7。 我安装了许多程序的主电脑没有这个问题。 我的笔记本电脑有这个问题。 我的小型电脑安装了很少的程序，也有这个问题，也没有安装任何 adobe 产品。 在有问题的 PC 上，如果我在 firefox 中进行刷新，问题会在大约 5-10 分钟内得到修复，然后又回来了。

如果这是一个 CSS 问题，为什么刷新 firefox 会暂时修复然后再回来？

这让我认为刷新后获取了某些后台插件或设置。

这可能是 Windows 上的其他应用程序造成的吗？

谁能告诉我他们是否可以重现这个问题以及如何解决这个问题以及是什么原因造成的？

这是我的 CSS

SELECT {
    color: #555558;
    font-size: 16px;
    margin: 0px 0px 8px 12px;
    padding: 2px 0px 2px 5px;
    width: 203px;
}

html

<select>
<option> - Select a Page - </option>
<option>Home Page</option>
<option>About Us</option>
<option>Camping Tips</option>
</select>

几个月前我就这个问题发布过，但是现在这个问题与 firefox 或 CSS 的版本无关，所以提供的答案是错误的。 Did Firefox 48 remove ability to style the select element?

这是插件列表，如上所述，默认安装会产生此问题。

Answer 1

请试试这个代码

/* 丑陋的选择框的 Firefox 修复 */

@supports (-moz-appearance:none) {
  select
  {
  -moz-appearance:none !important;
  background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
  background-position: calc(100% - 5px) center !important;
  }
}

谢谢

Answer 2

好的，所以这里的解决方案是禁用 -> 多进程窗口

在浏览器中输入 about:config

然后搜索 browser.tabs.remote.autostart（我有一个 browser.tabs.remote.autostart.2）

将此更改为 FALSE 然后重新启动浏览器 这将使 Firefox 运行多进程 Windows 被禁用，从而解决问题

Answer 3

这似乎是自多进程 Firefox 发布以来出现的错误。更多关于电解的信息：https://wiki.mozilla.org/Electrolysis

如果您使用的是 Firefox 48 或更高版本，您可能已经在使用 e10s。检查 about:support 并在“Multiprocess Windows”条目中查找大于 0 的数字。

可能是：受影响的计算机是由于启用了多进程所致。此问题正在 Bugzilla 上进行跟踪：https://bugzilla.mozilla.org/show_bug.cgi?id=910022

这个问题应该随着 Firefox 54 的发布自行解决。

Answer 4

测试代码：

-webkit-appearance: none;  /* Remove style Chrome */
-moz-appearance: none; /* Remove style FireFox */
appearance: none; /* Remove style FireFox*/