Fatal编程技术网
  • javascript/
  • Javascript 下拉列表打开/隐藏在IE 7上的另一个下拉列表后面

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

javascript jquery html css

Javascript 下拉列表打开/隐藏在IE 7上的另一个下拉列表后面,javascript,jquery,html,css,internet-explorer-7,Javascript,Jquery,Html,Css,Internet Explorer 7,我在html页面上创建了两个下拉列表。这在IE10、IE9、IE8和其他浏览器上运行良好，比如Firefox、Chrome、Opera、Safari，但在IE7上不起作用。在IE7上，它隐藏在另一个下拉列表后面，请参见图 下面给出了代码行 HTML代码 <html> <head> <title>Index</title> <link href="../../Content/dd1.css" rel="stylesheet"

我在html页面上创建了两个下拉列表。这在IE10、IE9、IE8和其他浏览器上运行良好，比如Firefox、Chrome、Opera、Safari，但在IE7上不起作用。在IE7上，它隐藏在另一个下拉列表后面，请参见图

下面给出了代码行

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>

问题：需要做什么更改才能使其在IE7上运行，如其他浏览器中所示？

尝试将
位置：相对于选择器的父级。我想你可能有IE7位置错误。您可以检索有关该错误的更多信息。
尝试从选择框中删除z索引。
我们可以看一个真实的示例或其他内容吗？我试图在我的本地机器上复制你的代码，但是你提到的JS对我不起作用。。。我在JS方面没有什么技能。非常感谢。

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