看代码:

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. MySql5.7主从配置

    记录 环境:ubuntu16.04,mysql5.7 主机:192.168.1.240,192.168.1.241:241为Salve 1.安装mysql sudo apt-get install m ...

  2. 七、vue中将token存到cookie

    使用js-cookie工具: 1.npm i js-cookie //安装2.import Cookies from 'js-cookie' //引用 // 存入cookie:Cookies.set( ...

  3. Python——函数入门(二)

    一.函数的参数 我们在定义函数时,可以定义形式参数(简称形参),这些形参的值在函数调用的时候才会确定,形参的值由调用者负责传入. 1.关键字参数 在Python中,函数的参数名并不是没有意义的,在调用 ...

  4. java基础—多态(动态加载)

    一.面向对象最核心的机制——动态绑定,也叫多态

  5. on() 和 click() 的区别

    on() 和 click() 的区别: 二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中. 以下实例中原先的 HTML 元素点击其身后的 Delete ...

  6. RAID阵列搭建

    RAID0 2个或2个以上磁盘,称为条带卷,无容错,可提高读写效率,其中一个磁盘损坏,所有文件不可读磁盘大小尽量统一,或者以最小的空间为标准,可用空间=N*min RAID1 2个或2个磁盘以上,称为 ...

  7. python元组的相对不可变性

    元组与多数python集合(列表.字典.集,等等)一样,保存的是对象的引用.如果引用的元素是可变的,即便元组本身不可变,但是元素依然可变.也就是说元组的不可变性其实是指tuple数据结构的物理内容(即 ...

  8. MySQL8.0.12安装及配置

    一.下载 下载页面http://dev.mysql.com/downloads/mysql/ 选择系统平台后,点击download(根据系统选择64或32位) 二.配置 1.下载成功后,解压安装包到要 ...

  9. 【linux】【rpm】确定程序是否 rpm 安装

    执行 rpm -qf 文件名如果结果显示出安装包那就说明是rpm (或者yum)安装 详情参看 rpm -v  (或者 man rpm) ​

  10. python3 发邮件 smtplib & email 库

    嗨 实现了用163发送到qq的功能,遗留了两个问题: 1. 接收者list会报错:update:因为list[]会传递过去一个真的[]list,改成如下就可以了: before: maillist=[ ...