看代码:

HTML

                <div class="select-wrap">
<div class="select-name">院系</div>
<div class="arrow"><img src="./img/arrow.png"></div>
<span class="selected-text"></span>
<div class="select">
<ul>
<li><a href="javascript:void(0);">院系1</a></li>
<li><a href="javascript:void(0);">院系2</a></li>
<li><a href="javascript:void(0);">院系3</a></li>
</ul>
</div>
</div>
<div class="select-wrap">
<div class="select-name">类型</div>
<div class="arrow"><img src="./img/arrow.png"></div>
<span class="selected-text"></span>
<div class="select">
<ul>
<li><a href="javascript:void(0);">类型1</a></li>
<li><a href="javascript:void(0);">类型2</a></li>
<li><a href="javascript:void(0);">类型3</a></li>
</ul>
</div>
</div>

CSS

.select-wrap{
position: relative;
width:288px;
height:34px;
margin-top: 15px;
border: 1px solid #cdcbcb;
}
.select-name{
float:left;
width:48px;
height:34px;
line-height: 34px;
text-align: center;
color:#7b7979;
background-color: #e6e6e6;
}
.selected-text{
display: inline-block;
float:left;
width:190px;
height:34px;
font-size: 14px;
padding-left: 10px;
line-height: 34px;
}
.arrow{
float:left;
width:32px;
height:16px;
/*border: 1px solid red;*/
margin-top: 10px;
text-align: center;
border-right: 1px solid #a8a8a8;
}
.arrow img{
cursor: pointer;
vertical-align: middle;
margin-top: -8px;
*margin-top:-3px;
}
.select{
position:absolute;
z-index:;
top:34px;
right:-1px;
width:210px;
background-color: #fff;
}
.select ul{
border: 1px solid #a8a8a8;
border-top:; }
.select li:hover{
background-color:#a8a8a8 ;
}
.select li a{
display: block;
height:20px;
line-height: 20px;
padding-left: 10px;
font-size: 14px;
}

正常情况下,Chrome,FF:

IE7及360兼容模式下:

原因:ie中子元素的优先级要取决于其父元素的优先级,需要设置父元素的z-index

解决方法:因为有两个同一class的div,绝对定位的ul的父元素就是.select-wrap,但是如果给两个.select-wrap设置一样的z-index值,还是没有效果,因为ul要遮挡的下面的元素仍然是.select-wrap,也就是说ul的父元素的优先级和下面要遮挡的元素的优先级相同,仍然无效,解决方法就是给两个select-wrap设置不同的z-index值即可.

IE7下z-index失效问题的更多相关文章

  1. IE7下onclick事件失效的问题

    http://blog.csdn.net/spy19881201/article/details/11066975?locationNum=15 $('#abc').unbind('click').c ...

  2. 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

    前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...

  3. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  4. ie7下z-index失效问题解决方法(详细分析)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面 ...

  5. ie7 下 float换行问题与vertical-align:middle; 失效问题

    声明:web小白的笔记,欢迎大神指点!联系QQ:1522025433. ie7 下 float换行问题 请直接看代码中和代码中的注释: <!doctype html> <html&g ...

  6. ie6、ie7下overflow失效

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...

  7. ie7下z-index失效问题解决方法

    绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了.解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上 ...

  8. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  9. IE6和IE7下绝对定位position:absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  10. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

随机推荐

  1. UVALive 3523 Knights of the Round Table 圆桌骑士 (无向图点双连通分量)

    由于互相憎恨的骑士不能相邻,把可以相邻的骑士连上无向边,会议要求是奇数,问题就是求不在任意一个简单奇圈上的结点个数. 如果不是二分图,一定存在一个奇圈,同一个双连通分量中其它点一定可以加入奇圈.很明显 ...

  2. 陆教授浅谈5G毫米波手机天线技术的发展现状和未来的应用场景

    近日,香港城大电子工程学系讲座教授陆贵文教授荣获英国皇家工程院院士荣衔,以表彰他在推动天线研究的卓越贡献.他研发的天线由L形探针馈电微带天线.磁电耦极天线,以至5G毫米波手机天线等技术,均在天线领域影 ...

  3. Paper: TranE

    论文标题:Translating Embeddings for Modeling Multi-relational Data 标题翻译:多元关系数据翻译嵌入建模 摘要: 考虑多元关系数据的实体和关系在 ...

  4. VC++:鼠标的使用

    长期改变鼠标形状: SetClassLongPtr(GetSafeHwnd(), GCLP_HCURSOR, (LONG)LoadCursor(NULL, IDC_WAIT));//这个是x64下可以 ...

  5. session添加登录次数限制

    session 中设置了生存期,20分钟,输入密码错误次数保存到session 中,过一段时间自动解除: //登陆的用户名或者密码出错次数 int n = 0; if(logintimes == nu ...

  6. tensorflow目标检测API安装及测试

    1.环境安装配置 1.1 安装tensorflow 安装tensorflow不再仔细说明,但是版本一定要是1.9 1.2 下载Tensorflow object detection API  下载地址 ...

  7. Jenkins忘记管理员密码处理

    1.先找到jenkins安装目录打开config.xml文件. 2.然后编辑,删除以下部分: <useSecurity>true</useSecurity> <autho ...

  8. 【Maven】 (请使用 -source 8 或更高版本以启用 lambda 表达式)

    在使用mvn install编译maven项目时,报了 “ (请使用 -source 8 或更高版本以启用 lambda 表达式)”错误,是因为设置的maven默认jdk编译版本太低的问题. 可使用两 ...

  9. tab key usage

    QA:gvim编辑ascii文本时由于tabkey的default setting 不合适编写Verilog代码(比如一个tab 代表多少空格) ANS: 1.tab 的自动补齐有两种usage自动补 ...

  10. 《linux设备驱动开发详解》笔记——12linux设备驱动的软件架构思想

    本章重点讲解思想.思想.思想. 12.1 linux驱动的软件架构 下述三种思想,在linux的spi.iic.usb等复杂驱动里广泛使用.后面几节分别对这些思想进行详细说明. 思想1:驱动与设备分离 ...