IE7下z-index失效问题
看代码:
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失效问题的更多相关文章
- IE7下onclick事件失效的问题
http://blog.csdn.net/spy19881201/article/details/11066975?locationNum=15 $('#abc').unbind('click').c ...
- 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效
前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- ie7下z-index失效问题解决方法(详细分析)
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面 ...
- ie7 下 float换行问题与vertical-align:middle; 失效问题
声明:web小白的笔记,欢迎大神指点!联系QQ:1522025433. ie7 下 float换行问题 请直接看代码中和代码中的注释: <!doctype html> <html&g ...
- ie6、ie7下overflow失效
如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...
- ie7下z-index失效问题解决方法
绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了.解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上 ...
- IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...
- IE6和IE7下绝对定位position:absolute和margin的冲突问题解决
绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...
- ie6和ie7下z-index bug的解决办法
一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...
随机推荐
- 如何使用Java代码给图片增加倒影效果
效果 倒影率为90%时的效果: 倒影率10%时的效果: 实现原理 倒影率作为参数rate 传入Reflection button的事件处理函数: CreateImageWithReflection这个 ...
- UVA 11997 K Smallest Sums (多路归并)
从包含k个整数的k个数组中各选一个求和,在所有的和中选最小的k个值. 思路是多路归并,对于两个长度为k的有序表按一定顺序选两个数字组成和,(B表已经有序)会形成n个有序表 A1+B1<=A1+B ...
- 2017年团体程序设计天梯赛 - 大区赛 L3-3
题意:有向图找哈密顿回路 比赛的时候剪枝只剪了vis 状压没剪对 反而只拿17分... 比赛结束后还去看了一发这个NP问题的QB(快速回溯法...但是对于本题好像大材小用...) 上网看了一个神犇的写 ...
- 设置DataGridView控件中字体的样式
实现效果: 知识运用: DataGridView控件的公共属性DefaultCellStyle的Font属性 public Font Font {get;set;} //获取或设置应用与DataGr ...
- java基础—配置环境变量
前言 学习java的第一步就要搭建java的学习环境,首先是要安装JDK,JDK安装好之后,还需要在电脑上配置"JAVA_HOME”."path”."classpath& ...
- Python 消息框的处理
在实际系统中,在完成某些操作时会弹出对话框来提示,主要分为"警告消息框","确认消息框","提示消息对话"三种类型的对话框. 1.警告消息框 ...
- 【转】BP神经网络
学习是神经网络一种最重要也最令人注目的特点.在神经网络的发展进程中,学习算法的研究有着十分重要的地位.目前,人们所提出的神经网络模型都是和学习算 法相应的.所以,有时人们并不去祈求对模型和算法进行严格 ...
- PAT 乙级 1051
题目 题目地址:PAT 乙级 1051 思路 最近做题发现一个比较明显的现象——总是在做简单题的过程中出现这样那样的小问题,究其原因我认为还是有很多细节性的知识没有掌握,这是在以后的学习过程中需要注意 ...
- Python入门基础--字符编码与文件处理
字符编码 文本编辑器存取文件的原理 #1.打开编辑器就打开了启动了一个进程,是在内存中的,所以,用编辑器编写的内容也都是存放与内存中的,断电后数据丢失 #2.要想永久保存,需要点击保存按钮:编辑器把内 ...
- MDK editions for Nuvoton devices
10 Sep 2018 MDK editions for Nuvoton devices For users of Nuvoton devices, Keil® MDK increases its a ...