火狐浏览器覆盖了HTML选择框中选项的样式。

Question

好的，这个问题困扰着我有一段时间了，我无法确定是什么原因导致的。我想知道是否还有其他人遇到了这个问题或者注意到了这个问题。

在我的CSS中，我将HTML选择选项的样式设置为类似于这样的样子：

在某些电脑上，它看起来像我设定的样式一样，而在其他电脑上则似乎被覆盖了，然后它就像这样：

目前已知的一些事实可以帮助确定引起此问题的原因。 所有我测试过的电脑都运行Windows 7。 我的主要PC安装了众多程序，并没有出现这个问题。 我的笔记本电脑出现了这个问题。 我的小型PC进行了干净的安装，只安装了很少的程序，也出现了这个问题，同时没有安装任何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;
}

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

几个月前我曾经发布过有关这个问题的帖子，但现在这个问题与Firefox或CSS版本无关，因此提供的答案是错误的。Firefox 48是否删除了对元素进行样式设置的功能？ 如上所述，以下是插件列表，但默认安装会产生此问题。

- drooh

---

也许您可以发布您的HTML。此帖子并没有暗示应该突出显示“选项”。 - A. L

我不认为这与HTML或CSS有任何关系，因为在Firefox刷新后，问题会在大约5-10分钟内得到解决，然后再次出现。 - drooh

你能列出你的存储库中所有的插件吗？ :) - treyBake

这些出现问题的计算机上安装了哪些 Firefox 插件/附加组件？另外，您正在运行 x86 还是 x64 版本的 Firefox？版本号是多少？ - light

Answer 1

请尝试这段代码

/* 火狐修复难看的下拉框 */

@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;
  }
}

谢谢

- subindas pm

---

@RickS 刚刚在搜索时发现并更新了这里，以帮助其他人。 - subindas pm

谢谢！我讨厌 Firefox 对我的选择列表的样式处理。它们在 Chrome 和 Edge 中看起来很正常，但在 Firefox 中它们看起来像是被禁用了，因为它想将它们变成灰色。 - Richard

Answer 2

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

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

机器受影响的几率很高，因为启用了多进程。这个问题正在Bugzilla上跟踪：https://bugzilla.mozilla.org/show_bug.cgi?id=910022 该问题应该会在Firefox 54发布时得到解决。

- light

---

有没有办法在等待 Firefox 54 的情况下解决这个问题？ - drooh

不幸的是，没有简单的解决方案。如果您今天确实需要在Firefox上使用自定义样式，请考虑使用来自小部件库（例如jquery UI）的自定义构建小部件。 - light

不限于 Firefox 版本 75。 - Alex

Answer 3

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

在浏览器中输入about:config

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

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

- drooh

---

请注意，当您这样做时，您只是绕过本地浏览器上的问题。如果您将网站部署到网络上，您要么必须指示用户执行相同操作，要么接受该问题直到Firefox在多进程中解决为止。 - light

是的，这已经被理解了，问题实际上是Firefox的一个错误，只能在Firefox发布修复版本之前在本地进行修复。 - drooh

Answer 4

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

看看这个分页栏：

请注意选择框所在的div的较大高度：-(

我所做的解决方法：在选择框上设置边框并将背景颜色设置为白色。

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

现在它看起来像这样：

在Chrome中看起来一样。

- mvreijn

Answer 5

测试代码：

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

- Mateus Veloso

---

有些浏览器实际上会修改元素。 - Mateus Veloso