IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总( 四 ) _云知道

有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上的小小偏差。
好，下面展示这个bug 。
条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码：

复制代码代码如下:
div/div
div style="position:relative;"
div style="position:relative; z-index:1000;"
div style="position:absolute; z-index:9999;"
img src="/images/defaultpic.gif" /
/div
/div
/div

可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可怜的IE6童鞋
再看看以Firefox为代表的其他童鞋：
IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！
知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代码如下：

复制代码代码如下:
div/div
div style="position:relative; z-index:1;"
div style="position:relative; z-index:1000;"
div style="position:absolute; z-index:9999;"
img src="/images/defaultpic.gif" /
/div
/div
/div

结果IE6童鞋喜笑颜开，春光灿烂：
19：css reset中的list-style:none
在IE6,7下,当UL不具有float:left;display:inline;时:无论有没有list-style:none这个属性,列表符都被隐藏,不占位置(下面代码中的5,6)当UL具有float:left;display:inline;属性时list- style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside);未设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)在firefox中只要list-style-type为none ,则无论list-stype-position的值为outside或inside , list-style都能很好的被隐藏而在IE6,7中,仅设置list-style:none,并不足以解决所有问题所以我认为在css reset的时候使用 list-style:none outside none 更好
20：链接去边线（完全兼容）

复制代码代码如下:
a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 额外产生的6PX 或者4px margin
今天在做一个Timeline的模块的时候遇到一个棘手的问题：给元素添加display:inline-block 属性的时候会产生额外的4px的margin-right 。
原始代码

复制代码代码如下:
.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;
background-color:#00FF00;
position:relative;
}

页面渲染结果：
每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover状态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：把原来的HTML 代码结构：更改为：这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。
22: IE6中伪类:hover的使用及BUG
以前未曾遇到类似的问题，一番google，才知道这是IE6处理CSS伪类:hover的Bug 。例如如下的代码：

复制代码代码如下:
style
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
/style
a href=http://www.taobao.com 淘宝网 span 淘你喜欢 /span/a

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总( 四 )

推荐阅读

头大的人应该怎样搭配衣服有什么方法

vivos1pro闪充突然失灵 vivos1pro是闪充么

蓝牙耳机怎么改中文蓝牙耳机怎么改中文语音

开发商完成交房有何方式

股票如果股东减仓了会怎么样

急诊科医生宫外孕是哪一集

平安家校和校讯通区别

iPhone6有无线充电功能吗 iphone6s有无线充电功能吗

平凉的主要经济来源是什么

阿里巴巴是马云自己的吗？不属于他了？

桑蚕丝衣服洗后有白色痕迹怎么处理

怎么点大乔的大,大乔技能加点教学

我来教你Win10截图工具不能用了的解决办法

上海迪士尼停车场位置收费，上海迪士尼停车场哪个离入口最近

联想y450a，联想Y450A到底怎样

5g物联卡购买平台纯流量卡流量卡交流分享