IE 样式问题 <select/> 元素答案

【问题标题】：IE issue with styling <select/> elementIE 样式问题 <select/> 元素
【发布时间】：2011-12-18 15:36:16
【问题描述】：

考虑以下 HTML 标记：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>search/master</title>
        <style type="text/css">
            select{
                background-color: pink;
            }
            option{
                background-color: white;
            }
        </style>
    </head>

    <body>
        <p>
            <select>
                <option>one........</option>
                <option>two........</option>
            </select> 
        </p>
    </body>
</html>

FF 上的输出如下：（Chrome、Safari 和 Opera 也有类似的输出）

但在 IE 上输出如下：

使 IE 上的输出看起来与其他浏览器相似的可靠且简单的解决方法是什么？

【问题讨论】：

标签： jquery html css internet-explorer cross-browser

【解决方案1】：

如果你确实想这样做，你可以使用 1px x 1px 背景图片，并将选项设置为 :transparent

select{
    background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
}
option{
    background: transparent;
}

查看我为你做的jsfiddle example

【讨论】：

非常恰当地使用了defiantly这个词。

【解决方案2】：

如果您将背景颜色（用于选择和选项）都设为粉红色，则它在每个浏览器中看起来都完全相同。一个更好的解决方案可能......根本不要在选项元素上指定背景颜色......

【讨论】：

"如果你将背景颜色（用于选择和选项）都设为粉红色，它在每个浏览器中看起来都完全相同" 不，'选择'在 IE 中将是白色的！
嗯..我用的是ie9，看起来很正常。也许您使用的是旧版本？
当然你是对的，我很抱歉。但我的要求是让“选择”和“选项”保持不同的颜色。
@MISS_DUKE：所以在这种情况下，FireFox（以及除 ie 之外的其他人）看起来很奇怪。

【解决方案3】：

首先删除以下 css 值，它为 OPTIONS 赋予白色背景色，从而在 IE 中隐藏选择的粉红色背景色。
```
option {
    background-color: white;
}
```

其次，始终将 Form 元素包含在 Form 和 Fieldset 标签内，如下所示：-

<form>
<fieldset>
    <select>
        <option>One</option>
    </select>
</fieldset>
</form>

Third Form 和 Fieldset 具有默认的边框和填充值，因此在 css 中您可以添加以下代码来删除这些默认值：
```
form, fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
}
```

简而言之，IE 不能正确显示选择框的主要原因是选择元素没有包含在 FORM 和 OPTION 的白色背景颜色值中。

希望这会有所帮助。

【讨论】：

【解决方案4】：

当我们为选择元素内部的选项和选择元素本身指定一些背景颜色时，就会出现问题。

Workaround : Apply style (background-color) to the option elements only when the select element is in focussed state. （只有在选择元素处于聚焦状态时，我们才能真正看到其中的选项元素）

 select{
     background-color: #f1f1f1;
     ...              
  }

  select:focus > *{
    background-color:#fff;
  }

【讨论】：