下拉列表在 Firefox 中不可见答案

【问题标题】：Dropdown list not visible in Firefox下拉列表在 Firefox 中不可见
【发布时间】：2015-03-03 23:51:05
【问题描述】：

我有一个下拉列表，其中包含在 Firefox 中不可见但在 IE 和 Chrome 中可见的选项。我在下面添加了代码sn-p。

<!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>

谁能帮我解决这个问题。

【问题讨论】：

在 Chrome 中发生在我身上 - 问题是我忘记添加

标签： html css firefox browser

【解决方案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>

【讨论】：

它可能有效，但我从后端代码获取选项的 html 内容，所以这将是我最后的手段。
@naXa 这是一个公平的观点，但它仍然没有解决，可以修复。

【解决方案2】：

你必须在

中写入值

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

【讨论】：

它可能有效，但我从后端代码获取选项的 html 内容，所以这将是我最后的手段。

【解决方案3】：

这是 Firefox 中一个未解决的老问题，但假设您可以使用 jQuery，分享一个为我完成工作的快速解决方法。在我的 aspx 页面中使用了多个选择元素，如下所示 -

<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 选择器以使其更具体。

这样，您不必更改任何服务器端数据标签。已在 Firefox 40.0.3 中对此进行了测试。

【讨论】：