有没有办法在 IE 6 上通过 CSS 增强 HTML <select> 及其 <option> ？答案

【问题标题】：Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?有没有办法在 IE 6 上通过 CSS 增强 HTML <select> 及其 <option> ？
【发布时间】：2008-10-15 21:50:14
【问题描述】：

Internet explorer 6 似乎完全忽略了关于 select、option 或 optgroup 标签的 CSS 类或规则。

有没有办法绕过这个限制（安装最新版本的 IE 除外）？

编辑：更准确地说，我正在尝试在该示例中的选项之间建立层次结构：

这是 HTML sn-p ：

<select name="hierarchicalList" multiple="multiple">
  <option class="group niv0">Os developers</option>
  <option class="group niv1">Linux</option>
  <option class="user niv2">Linus Torvald</option>
  <option class="user niv2">Alan Cox</option>
  <option class="group niv1">Windows</option>
  <option class="user niv2">Paul Allen</option>
  <option class="user niv2">Bill Gates</option>
  <option class="group niv1">Mac Os</option>
  <option class="user niv2">Steve Wozniaz</option>
</select>

这里是 CSS 规则，在最近的浏览器（如 FF3）上运行良好，但在 IE6 上根本不运行：

 select option {
   line-height: 10px;
 }

 select option.group {
    font-weight: bold; 
    background: url(path_to_group_icon.gif) no-repeat; 
    padding-left: 18px;
 }

 select option.user {
    background: url(path_to_user_icon.gif) no-repeat; 
    padding-left: 18px;
 }

 select option.niv0 { margin-left: 0px; }
 select option.niv1 { margin-left: 10px; }
 select option.niv2 { margin-left: 20px; }

【问题讨论】：

标签： css internet-explorer browser

【解决方案1】：

文章here 和here 中提供了有关表单元素样式有效和无效的非常详细的指南。根据我的商业经验，在 IE6 上工作的跨浏览器表单布局并非不可能（尽管您确实需要仔细测试）。执行摘要是您可以控制大小和颜色，但尝试对文本对齐等进行微观管理是一场失败的战斗。

【讨论】：

【解决方案2】：

这不会完全符合您的要求，但不是使用 CSS，您可以使用多个

&nbsp ;

对于缩进或破折号：

1 级

-2级

--3级

等等

如果你不是特别喜欢这样，你可以用

包围它们

<!--[if lt IE 7]><![endif]-->

或

<!--[if IE 6]><![endif]-->

它看起来像

Level 1
<!--[if lt IE 7]>-<![endif]-->Level 2 
<!--[if lt IE 7]>--<![endif]--> Level 3

那么你就可以拥有现代浏览器的 CSS。

【讨论】：

这是一个好主意，但这个“-”（破折号）也会显示在所选项目中。我不希望它们显示在所选字段框中。我该怎么做？
不会显示&nbsp; - 它被称为“不间断空格”，即它只是一个“空格”。

【解决方案3】：

查看 optgroup 标记以对 select 标记内的条目进行分组。看这里：http://www.netmechanic.com/news/vol4/html_no20.htm 示例

【讨论】：

【解决方案4】：

来自MSDN reference：

除了背景颜色和颜色，通过应用的样式设置选项元素的样式对象被忽略。此外，风格设置直接应用于个别选项覆盖那些应用于包含 SELECT 元素作为一个整体。

好的，所以...没有办法让它在 IE 上运行...

感谢马特的 nbsp；主意。我肯定会使用这种解决方法。

【讨论】：

【解决方案5】：

选项的 IE6 css 实现是错误的（IE6 的整个 css 实现也是如此）但是您可以使用 css 设置选项样式。我刚刚测试了更改选项并选择标签 bgcolor，它按预期工作。我知道的唯一不能设置样式的组件是文件输入。

【讨论】：

【解决方案6】：

是的，您可以（在某种程度上）为它们设置样式。我有时会更改字体、背景颜色和颜色样式。

你想达到什么目的？

CSS 和 HTML sn-ps 会很有用。

【讨论】：

是的，你是对的，我刚刚添加了一些在 IE 6 中不起作用的 css 规则。感谢您的需求！ :)

【解决方案7】：

您可以改用下拉菜单脚本来模拟整个过程。它会给你完全的控制权。

【讨论】：