下拉列表在 Firefox 中不可见

Question

我有一个下拉列表，其中的选项在 Firefox 中不可见，但在 IE 和 Chrome 中都可见。我在下面添加了代码片段。

<!DOCTYPE html>
<html>
<head>
<title>Mozilla Test</title>
</head>
<body>
<select id="product" name="product"  title="Product" tabindex="14" style="padding-top:1px!important;padding-bottom:1px!important;width:100px;>
  <option value="selectFruit" label="--Select--"></option>
  <option value="APP" label="Apple"></option>
  <option value="BAN" label="Banana"></option>
  <option value="GRA" label="Grapes"></option>
</select>
</body>
</html>

谁能帮我解决这个问题。

Answer 1

这似乎是 firefox 中的错误。 (https://bugzilla.mozilla.org/show_bug.cgi?id=40545#c11)

我假设您尝试过将标签添加为选项元素的内容？

<!DOCTYPE html>
<html>
<head>
<title>Mozilla Test</title>
</head>
<body>
<select id="product" name="product"  title="Product" tabindex="14" style="padding-top:1px!important;padding-bottom:1px!important;width:100px;>
  <option value="selectFruit" label="--Select--"></option>
  <option value="APP" label="Apple">Apple</option>
  <option value="BAN" label="Banana">Banana</option>
  <option value="GRA" label="Grapes">Grapes</option>
</select>
</body>
</html>

Answer 2

您必须在

中写入值

<option value="APP" label="Apple">Apple</option>

Answer 3

这是 Firefox 中一个未解决的老问题，但假设您可以使用 jQuery，分享一个对我有用的快速解决方法。我的 aspx 页面中使用了多个 select 元素，如下所示 -

<select id="cbType" runat="server" class="form-control"
    title="<%$ Resources: Something %>">
    <option value="0" selected="selected" label="<%$ Resources: Option1 %>" runat="server"></option>
    <option value="1" label="<%$ Resources: Option2 %>" runat="server"></option>
    <option value="2" label="<%$ Resources: Option3 %>" runat="server"></option>
    <option value="3" label="<%$ Resources: Option4 %>" runat="server"></option>
    <option value="4" label="<%$ Resources: Option5 %>" runat="server"></option>
</select>

现在只需从 jQuery(document).ready().

调用以下方法

function fixFirefoxDropdownIssue() {
    jQuery('select option').each(function() {
        jQuery(this).text(jQuery(this).attr('label'));
    });
}

它基本上是将选项的内部文本设置为标签属性指定的值。如果需要，您可以更改 jQuery select 或使其更具体。

这样，您就不必更改任何服务器端数据标签。已在 Firefox 40.0.3 中测试过。

下拉列表在 Firefox 中不可见

Dropdown list not visible in Firefox

html

css

firefox

browser