下拉列表打开/隐藏表示IE 7上的另一个下拉列表 [英] Dropdown list open/hide behaind another dropdown list on IE 7
问题描述
嗨专家！
我在html页面上创建了两个下拉列表。这在IE 10，IE 9，IE 8和其他浏览器上工作正常，例如Firefox，Chrome，Opera，Safari但不能在IE 7上运行。在IE 7上它隐藏在另一个下拉列表后面，见图像
http://i.stack.imgur.com/yaCqd.png [ ^ ]
代码行如下：
HTML code
< pre lang =text>< html>
< head>
< title> Index< / title>
< link href =../../ Content / dd1.css =stylesheettype =text / css/>
< / head>
< body style =background-color：＃4876b9;>
< table style =>
< tr>
< td>
< select id =ItemList1name =ItemList1style =width：240px; position：relative;
z-index：0;>
< option value =tooltipdata =>第1项< /选项>
< option value =tooltipdata =>第2项< /选项>
< option value =tooltipdata =>第3项< /选项>
< option value =tooltipdata => Item 4< / option>
< option value =tooltipdata => Item 5< / option>
< / select>
< / td>
< / tr>
< tr>
< td>
< select id =ItemList2name =Applicationstyle =width：240px;>
< option value =tooltipdata =>第6项< /选项>
< option value =tooltipdata => Item 7< / option>
< option value =tooltipdata => Item 8< / option>
< option value =tooltipdata =>第9项< /选项>
< option value =tooltipdata =>第10项< /选项>
< / 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 =javascripttype =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 ： 倾斜;
font-size ： 14px;
颜色 ： ＃000000;
职位 ： relative;
}
。 dd2 。 ddTitle
{
text-indent ： 0;
游标 ： 默认值;
溢出 ： 隐藏;
高度 ： 25px;
}
。< span class =code-leadattribute> 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 ： 指针;
position ： relative;
}
。 dd2 。 ddTitle span 。 ddTitleText
{
text-indent ： 1px;
溢出 ： 隐藏;
line-height ： 25px;
margin-left ： 5px;
font-family ： TradeGothic;
font-style ： oblique;
font-size ： 14px;
}
。 dd2 。< span class =code-leadattribute> ddTitle span 。 ddTitleText img
{
}
。 dd2 。 ddTitle img 。 selected
{
vertical-align ： top;
}
。 dd2 。 ddChild
{
position ： 绝对值;
background-color ： < span class =code-keyword> #fff;
border ： 1px solid＃e5e5e5;
border-top ： 无;
显示 ： 无;
margin ： 0;
width ： auto;
溢出 ： auto;
overflow-x ： 隐藏！important ;
font-size ： 14px;
}
。 dd2 。 ddChild 。 opta a ，。 dd2 。 ddChild 。 opta a：已访问
{
< span class =code-attribute> padding-left ： 10px;
}
。 dd2 。 ddChild a
{
display ： 阻止;
text-decoration ： none;
color ： ＃000;
溢出 ： hidden;
white-space ： nowrap;
cursor ： 指针;
padding- left ： 10px;
padding-top ： 1px;
margin-bottom ： 0px;
height ： 25px;
line-height ： 25px;
}
。 dd2 。 ddChild a ：悬停
{
background-color ： ＃d21c1c;
颜色 ： #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 ： 无0 ！important ;
}
query.dd.js文件
http://code.google.com/p/phpwcms-modules/source /browse/trunk/include/inc_module/mod_cm_calendar/template/msdropdown/js/jquery.dd.js?r=86
请帮帮我！
提前感谢！
（文件）.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 ： 倾斜;
font-size ： 14px;
颜色 ： ＃000000;
职位 ： relative;
}
。 dd2 。 ddTitle
{
text-indent ： 0;
游标 ： 默认值;
溢出 ： 隐藏;
高度 ： 25px;
}
。< span class =code-leadattribute> 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 ： 指针;
position ： relative;
}
。 dd2 。 ddTitle span 。 ddTitleText
{
text-indent ： 1px;
溢出 ： 隐藏;
line-height ： 25px;
margin-left ： 5px;
font-family ： TradeGothic;
font-style ： oblique;
font-size ： 14px;
}
。 dd2 。< span class =code-leadattribute> ddTitle span 。 ddTitleText img
{
}
。 dd2 。 ddTitle img 。 selected
{
vertical-align ： top;
}
。 dd2 。 ddChild
{
position ： 绝对值;
background-color ： < span class =code-keyword> #fff;
border ： 1px solid＃e5e5e5;
border-top ： 无;
显示 ： 无;
margin ： 0;
width ： auto;
溢出 ： auto;
overflow-x ： 隐藏！important ;
font-size ： 14px;
}
。 dd2 。 ddChild 。 opta a ，。 dd2 。 ddChild 。 opta a：已访问
{
< span class =code-attribute> padding-left ： 10px;
}
。 dd2 。 ddChild a
{
display ： 阻止;
text-decoration ： none;
color ： ＃000;
溢出 ： hidden;
white-space ： nowrap;
cursor ： 指针;
padding- left ： 10px;
padding-top ： 1px;
margin-bottom ： 0px;
height ： 25px;
line-height ： 25px;
}
。 dd2 。 ddChild a ：悬停
{
background-color ： ＃d21c1c;
颜色 ： #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 ： 无0 ！important ;
}
query.dd.js文件
http://code.google.com/p/phpwcms-modules/source /browse/trunk/include/inc_module/mod_cm_calendar/template/msdropdown/js/jquery.dd.js?r=86
请帮帮我！
提前感谢！
Hi Expert!
I have created two dropdown list on html page. That''s working fine on IE 10, IE 9 , IE 8 and other browser such that Firefox, Chrome , Opera, Safari but not work on IE 7. On IE 7 it hide behind another dropdown list, see image
http://i.stack.imgur.com/yaCqd.png[^]
line of code are given below
HTML code
<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>
Dropdown List 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;
}
query.dd.js File
http://code.google.com/p/phpwcms-modules/source/browse/trunk/include/inc_module/mod_cm_calendar/template/msdropdown/js/jquery.dd.js?r=86
Please help me!
Thank in advance!
(document).ready(function () { jQuery.noConflict(); jQuery("#ItemList1").msDropDown({ mainCSS: 'dd2' }); jQuery("#ItemList2").msDropDown({ mainCSS: 'dd2' }); }); </script> </body> </html>
Dropdown List 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; }
query.dd.js File
http://code.google.com/p/phpwcms-modules/source/browse/trunk/include/inc_module/mod_cm_calendar/template/msdropdown/js/jquery.dd.js?r=86
Please help me!
Thank in advance!
这篇关于下拉列表打开/隐藏表示IE 7上的另一个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://i.stack.imgur.com/yaCqd.png](\"http://i.stack.imgur.com/yaCqd.png\"){kind=link}
