在 Internet Explorer 中设置 `<select>` 样式答案

【问题标题】：Styling `<select>` in Internet Explorer在 Internet Explorer 中设置 `<select>` 样式
【发布时间】：2010-10-13 09:31:07
【问题描述】：

有什么方法可以在 IE 中自定义 HTML <select> 的边框和背景？我可以在 Firefox 中使用简单的 CSS 设置边框样式，但在 IE 中显然不行。

【问题讨论】：

标签： html css internet-explorer internet-explorer-8 html-select

【解决方案1】：

IE 很可能处于怪癖模式。以前版本的 IE 没有自己绘制 select 元素，因此无法正确设置样式（以及一些 z-order 怪癖），所以在 IE select 的东西。看看开发者工具（F12）看看IE是在哪个浏览器和文档模式下；如果浏览器模式显示“Internet Explorer 8”而不是文档模式显示“Quirks 模式”，你应该没问题 :)

以下 sn-p 在这里可以正常工作（IE8β2）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            select {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        </form>
    </body>
</html>

【讨论】：

当然，但它被标记为“ie8”，所以我认为他说的是 IE8。是的，我已经暗示以前的版本不会做边框样式。我会改变的。

【解决方案2】：

在您的代码中包含这些标签：

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
</head>

这将解决与 Internet Explorer 相关的问题。

【讨论】：

您是否阅读过三年前发布的问题或已接受的答案？ -1
此外，您不能只在任何您想要的地方包含一个新的。当您写下答案时，您可能不会这样认为，但这就是它的阅读方式。另外，您只需将 IE 模式设置为 IE 9，这绝不是未来的证明。尤其是现在 IE 10 出来了。 IE=edge 更合适。此外，重要的是要通过强制使用新版本来了解旧浏览器的行为，而不仅仅是忽略它们。