Firefox 覆盖 html select 选项的样式

Question

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

在我的 css 中，我有 html select 选项样式看起来类似于此

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

目前的一些事实有助于确定造成这种情况的原因。我测试过的所有电脑都是运行 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

测试代码：

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

Answer 2

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

If you're using Firefox 48 or later, you might be using e10s already. Check about:support and look for a number higher than 0 in the "Multiprocess Windows" entry.

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

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

Answer 3

好的，所以这里的解决方案是 disable -> Multiprocess Windows

在浏览器中输入about:config

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

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

Answer 4

请试试这个代码

/* FIREFOX FIX 丑陋 SELECT 框 */

@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 5

我知道这是一个旧线程，但行为仍然存在（OSX 上的 FF 100）。

看看这个分页栏：

还请注意 div 的较大高度，其中包含 select :-(

我为解决此问题所做的工作：在 select 上设置边框并将背景颜色设置为白色。

select {
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: white;
    padding: 0px;
}

现在看起来像这样：

在 Chrome 中看起来一样。

Firefox 覆盖 html select 选项的样式

Firefox overriding style of html select option

html

css

firefox