下拉菜单的 CSS 在 Chrome 和 IE 中无法正常工作答案

【问题标题】：CSS for Dropdown does not works fine in Chrome and IE下拉菜单的 CSS 在 Chrome 和 IE 中无法正常工作
【发布时间】：2012-01-18 16:52:51
【问题描述】：

我为 HTML 下拉元素编写了一个样式，它在 FF 和 Safari 上运行良好，但在 Chrome 和 IE 上却不行。

这里附上图片和样式代码：

.select_box {
    background-color: transparent;
    background-image: url(images/input_smal.png);
    background-repeat: no-repeat;
    border: none;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 33px;
    padding: 6px 15px 5px;
    width: 292px;
}

HTML 代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Muhammad Sajid</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table width="100%" border="0" align="left" cellpadding="0" cellspacing="15">
        <tr>
            <td nowrap="nowrap">Status</td>
            <td><select class="select_box" id="status" name="status">
                    <option >Open</option>
                    <option >Pending</option>
                    <option >In Progress</option>
                    <option  selected="selected">Closed</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

我确信问题是由于： background-color 和/或 background-image 属性，但我无法修复它们......！

【问题讨论】：

请同时推送您的 HTML 代码
好的，我也粘贴 HTML 代码
wated 字节可以这样写：background: transparent url(images/input_smal.png) no-repeat 0 0; 我不知道它是否能解决你的问题，但我通常在使用背景图像时不显示颜色background: url(images/input_smal.png) no-repeat 0 0;

标签： html css internet-explorer google-chrome

【解决方案1】：

我认为您在 Google Chrome 中的问题与 2.0 版中的错误有关，但在 3.0 中已解决。在这里，您有一个关于此的主题以及指向错误的链接：

Why is the html select background-color black in Chrome when set to transparent?

关于 IE，您使用的是 IE 7 还是更低版本？如果是这样，它们不支持transparent 背景。您应该将与父级相同的背景颜色应用于 IE7 及更低版本（例如使用 hack）。

【讨论】：

我正在使用 Chrome：16.0.912.75 m