我在 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;
}
问题:需要做哪些更改才能使其像其他浏览器一样在 IE7 上运行？
最佳答案
尝试将 position:relative 设置为您的选择器的父级。我认为您可能遇到了 IE7 位置错误。您可以检索有关该错误的更多信息 here .
关于javascript - 下拉列表在 IE 7 上打开/隐藏在另一个下拉列表后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16011046/