关于IE7一些常见问题的总结

1.两个div层叠被覆盖时提高上层元素的z-index无效
解决办法：提高根节点元素的z-index
父级元素加上position:relative;并设置z-index.
父级元素的z-index优先，其中包含的元素的z-index是相对于父级元素的index.

		<div style="position: relative;">
				<div class="warp1" style="height: 200px;width: 200px;background: red;">
					<div style="height: 100px;width: 100px;position: absolute;left: 40px;bottom: 20px;z-index: 66;background: black;color: #FFFFFF;">z-index:66</div>
				</div>
				<div class="warp2" style="height: 200px;width: 200px;background: blue;">
					<div style="height: 100px;width: 100px;position: absolute;left: 60px;top: 40px;z-index: 666;background: yellow;color: #000000;">z-index:666</div>
				</div>
			</div>

出现warp1下面的div覆盖warp2下面的div时，提高父元素warp1的z-index可以解决

2.li标签垂直排列时出现间隙排列不紧凑

ie7中li元素在不浮动，并且存在宽度的情况下默认存在2px的外边距

解决办法：给元素设置浮动，设置ul和li的vertical-align:top或者bottm，或者不设置宽度都可以解决

3.ie7使用下拉菜单时下拉过程中子元素无法超过父元素的宽度


![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109164831825.png
在li列表中，当父元素ul没有给定width时，li列表元素下拉动画中只显示等于父元素宽度的内容

解决办法：始终设置li列表父元素的ul的宽度

4.ie7 DIV叠加情况下鼠标悬停上层元素无效，指针穿透到下层元素并且触发下层元素事件

紫色圈内为上层列表项，蓝色框内为下层列表项，正常悬停在红色框位置是不会触发蓝色框内的hover效果的。
但是ie7中可能出现鼠标移入紫色款内除开文字和img标签，其他任意位置都能触发下层标签的hover效果

解决办法：具体的问题出在哪里现在还没有发现，出现这个情况，给紫色框内元素设置固定宽度就可以了