在网页中,每个元素都有自己的默认层级定义,正因为这些关系,元素才有显示层次的区分,当然也可以利用CSS中的z-index属性来改变元素的默认层级关系。 由于不同浏览器对层次关系的解释不同,会造成浏览器之间的显示差别,出现bug,比如IE6、IE7和Firefox之间,所以要想些办法修正这些差别,达到统一效果。 常见的层级bug有层被下拉框盖住的bug、flash文件始终在最顶层等等很多,本篇文章先讲解如何解决IE6中层被下拉框盖住的bug。 IE6中层被下拉框盖住的bug究竟是什么样子的?请看以下代码:
推荐标签
西藏 动漫 35mm 足球 壁纸 汽车
数码 夏天 偶像 清纯 婚纱 5D
服饰 电影 lomo 搞笑 造型 黑白
香港 建筑 艺术 幽默 快乐 MM
将以上代码粘贴到网页中,使用IE7和Firefox浏览器查看均无异样,但使用IE6查看时效果却如图一所示。虽然名为tags_box的p已经声明z坐标的值为999,但在IE6下仍然被选择框的下拉菜单遮挡住了,造成这个问题的原因是IE6将选择框的默认层级视为最高级,所以将tags_box盖住。 要解决这个问题,只改变z-index的值是达不到效果的,但是,可以找到和选择下拉框同样被IE6误认为最高等级的另一元素——iframe解决它。具体方法是在tags_box这个p中插入一个iframe,并让它的的透明度为0,看起来好像不存在一样。代码如下:
只要将以上代码复制到tags_box的p中即可,在IE6中的预览效果应如图二中所示。