Firefox for Android 选择元素不下拉答案

【问题标题】：Firefox for Android Select Element Does Not Drop DownFirefox for Android 选择元素不下拉
【发布时间】：2017-05-15 17:01:08
【问题描述】：

我今天在 Firefox for Android（Samsung Galaxy Tab S2；Android 6.0.1）中遇到了一些非常出乎意料的事情。 HTML <select> 元素不会下拉，而是显示覆盖样式的弹出窗口。简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  select {
    height: 3.0em;
    width:15.0em;
  }
  </style>
</head>
<body>
  <select name="dookie" id="dookie">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</body>
</html>

在 Firefox for Android (50.1.0) 中：

点击下拉菜单会产生这样的结果：

Android 版 Chrome 和 Android 浏览器都按预期显示下拉菜单。在 Android 版 Chrome (55.0.2883.91) 中：

我在 Firefox 设置中看不到任何改变此行为的内容。有谁知道为什么/如何解决这个问题？

【问题讨论】：

标签： android html css firefox

【解决方案1】：

这是firefox for android 显示select 标签的方式。没有办法“修复”这个问题，因为它是一种操作系统行为。

您可以更改它并确保select 元素在所有浏览器中的行为完全相同的唯一方法是使用javascript 将原始<select> 标记替换为基本html 元素（如div/ul/li ) 和 css（所有常规选择库都会这样做（select2、jquery-ui's selectmenu 等）。

【讨论】：

如图所示，这不是操作系统行为：它是 Firefox 特有的。 Chrome、Android、Opera、Opera Mini、Dolphin、Rocket、CM、Fast Browser 等 - 我测试过的所有其他 android 浏览器 - 除了 Firefox 根据 W3C 规范显示选择标签。