1

我在 html 页面上创建了两个下拉列表。这在 IE 10、IE 9、IE 8 和其他浏览器（如 Firefox、Chrome、Opera、Safari）上运行良好，但在 IE 7 上不起作用。在 IE 7 上，它隐藏在另一个下拉列表后面，请参见图片

在此处输入图像描述

代码行如下

HTML 代码

<html>
<head>
    <title>Index</title>
    <link href="../../Content/dd1.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color: #4876b9;">
    <table style="">
        <tr>
            <td>
                <select id="ItemList1" name="ItemList1" style="width: 240px; position: relative;
                    z-index: 0;">
                    <option value="" tooltipdata="">Item 1</option>
                    <option value="" tooltipdata="">Item 2</option>
                    <option value="" tooltipdata="">Item 3</option>
                    <option value="" tooltipdata="">Item 4</option>
                    <option value="" tooltipdata="">Item 5</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="ItemList2" name="Application" style="width: 240px;">
                    <option value="" tooltipdata="">Item 6</option>
                    <option value="" tooltipdata="">Item 7</option>
                    <option value="" tooltipdata="">Item 8</option>
                    <option value="" tooltipdata="">Item 9</option>
                    <option value="" tooltipdata="">Item 10</option>
                </select>
            </td>
        </tr>
    </table>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/dropdown/jquery.dd.js")" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            jQuery.noConflict();
            jQuery("#ItemList1").msDropDown({ mainCSS: 'dd2' });
            jQuery("#ItemList2").msDropDown({ mainCSS: 'dd2' });
        });
    </script>
</body>
</html>

下拉列表 CSS (dd1.css)

.dd2
{
    text-align: left;
    background-color: #E5E5E5;
    font-family: TradeGothic;
    font-style: oblique;
    font-size: 14px;
    color: #000000;
    position: relative;
}
.dd2 .ddTitle
{
    text-indent: 0;
    cursor: default;
    overflow: hidden;
    height: 25px;
}
.dd2 .ddTitle span.arrow
{
    background: transparent url(../../Content/icon-arrow.gif) no-repeat 0 0;
    float: right;
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer; 
    position: relative;
}

.dd2 .ddTitle span.ddTitleText
{
    text-indent: 1px;
    overflow: hidden;
    line-height: 25px;
    margin-left: 5px;
    font-family: TradeGothic;
    font-style: oblique;
    font-size: 14px;
}
.dd2 .ddTitle span.ddTitleText img
{

}
.dd2 .ddTitle img.selected
{

    vertical-align: top;
}
.dd2 .ddChild
{
    position: absolute;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    display: none;
    margin: 0;
    width: auto;
    overflow: auto;
    overflow-x: hidden !important;
    font-size: 14px;
}
.dd2 .ddChild .opta a, .dd2 .ddChild .opta a:visited
{
    padding-left: 10px;
}
.dd2 .ddChild a
{
    display: block;
    text-decoration: none;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 10px;
    padding-top: 1px;
    margin-bottom: 0px;
    height: 25px;
    line-height: 25px;
}
.dd2 .ddChild a:hover
{
    background-color: #d21c1c;
    color: #fff;
}
.dd2 .ddChild a img
{
    border: 0;
    padding: 0 2px 0 0;
    vertical-align: middle;
}
.dd2 .borderTop
{
    border-top: 1px solid #c3c3c3 !important;
}
.dd2 .noBorderTop
{
    border-top: none 0 !important;
}

下拉 JS 文件

问题：需要进行哪些更改才能使其在 IE7 上运行，就像显示的其他浏览器一样？

4

2 回答 2

0

尝试将 z-index 从选择框中移除。

于 2013-04-15T09:30:53.987 回答
0

尝试设置position:relative为您的选择器的父级。我认为您可能会遇到 IE7 位置错误。您可以在此处检索有关该错误的更多信息。

于 2013-04-15T08:54:53.800 回答