Question

考虑以下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也有相似的输出）

output on FF & other browsers

但IE上的输出如下：

output on IE

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

Answer 1

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

Answer 2

如果您肯定想要这样做，可以使用1px x 1px背景图片，并将选项设置为:transparent

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

查看我为您所做的jsfiddle example

Answer 3

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

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

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

第三个表单和字段集具有默认边框和填充值，因此在css中您可以添加此代码以删除这些默认值：
```
form, fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
}
```

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

希望这有帮助。

Answer 4

当我们为select元素和select元素本身中的选项指定一些背景颜色时会出现问题。

解决方法：仅当select元素处于焦点状态时才将样式（背景颜色）应用于选项元素。（只有在select元素的聚焦状态期间，我们才能看到其中的选项元素）

<style name="AppTheme" parent="Theme.AppCompat.Light">

带有样式<select>元素</select>的IE问题

4 个答案: