Question

我在html页面上创建了两个下拉列表。这在IE 10，IE 9，IE 8和其他浏览器上工作正常，例如Firefox，Chrome，Opera，Safari但不能在IE 7上运行。在IE 7上，它隐藏在另一个下拉列表后面，见图像

enter image description here

代码行在下面给出

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;
}

Dropdown JS File

问题：如在其他浏览器中显示的那样，在IE7上运行需要进行哪些更改？

Answer 1

尝试将position:relative设置为选择器的父级。我想你可能会得到一个IE7位置错误。您可以检索有关该错误的更多信息here。

Answer 2

尝试从选择框中取出z-index。

下拉列表打开/隐藏在IE 7上的另一个下拉列表后面

2 个答案: