IE7 relative问题

来源:互联网 发布:淘宝手机充值代付 编辑:程序博客网 时间:2024/06/06 09:32

今天又遇IE relative问题,这个问题只在IE7下有出现,具体问题描述如下:

先看效果图:


再上代码结构:


需求需要的效果描述:

当鼠标经过每一个li的时候,都会弹出相对应的提示信息框!

问题:

提示信息框都放在了Li的里面,所以为每个li设置了position:relaitve;同时当鼠标经过的时候,当前鼠标所在的li的z-index:1,其他则设置成z-index:0;用来保证弹出的提示信息框不被其他Li挡住,但在IE7下如果是通过Js来动态修改z-index属性的时候,IE7中li所设置间距(margin)会发生变化。当多个LI分多行显示的时候,每一行的第一个LI的margin所设置的间距会消失。我这边设置的是margin-left:14px;

平常常用手段解决:

IE的relative问题都有见过,很多也可能都碰到并解决过,出现类似问题,当前首先会想到在li的元素中也加上relative,但这次却失效了!

后来通过测试发现使用padding来控制间距就不会出现这个问题,所以就将Li间距都用padding进行了设置,但我一直没有找到问题的具体原因是什么。


如果今后有碰到类似的问题,可以尝试使用这个方法来解决!

如果有看到这篇文章的博友们知道这个问题,出于何因也可以告知于我,谢谢!咱一起沟通!