html - 带有显示 :none not working in Safari and IE 的 CSS 定位选择选项

Question

我遇到了一个奇怪的 CSS 问题。

我有一个像这样的 HTML 标记的下拉选择器:

<select id="cat_p" name="cat_p" onchange="ListChildCategories(this.options[this.selectedIndex].value, 0);" class="required validate-list">
    <option value="-1" selected="selected">- Choose a category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
    <option value="4">Category 4</option>
    <option value="5">Category 5</option>
</select>

现在，我想使用 CSS 隐藏其中一个选择选项(假设是类别 5)，因此我使用以下 CSS 代码:

select#cat_p option[value="5"] {
display: none;
}

结果在 Chrome 和 Firefox 中是完美的，但在 Safari 和 IE 中这个 CSS 不起作用。我已经在 Safari 开发人员面板中检查过，我可以看到 CSS 已注册为有效并且它没有被其他 CSS“划掉”/覆盖，所以它应该可以工作，我认为..非常奇怪..

有人知道这里的问题是什么吗？

我做了一个 fiddle ，这样你就可以直接看到问题: http://jsfiddle.net/wH8kF/

Answer 1

您不能在 Safari 浏览器中使用 toggle 或 display:none 属性或 hide/show with select 选项。它适用于所有其他浏览器，如 Chrome、Firefox 等。这是一个长期且不一致的传统的一部分，Safari 限制表单元素上的 CSS 样式功能，认为交互元素的视觉语言应该与操作系统一致(没有意义尝试寻找 IE 失败的原因)。

您唯一的选择是删除它(稍后重新附加)，或将其设置为 optnz.disabled = true。对不起，坏消息!