正 文

利用z-index解决效果兼容


www.7dspace.com  更新日期:2006-1-3 1:38:36  七度空间


   z-index的准确含义是:检索或设置对象的层叠顺序。在IE5.5+中, iframe 对象开始支持此属性。而在之前的浏览器版本中, iframe 对象是窗口控件,会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

  于是我们可以利用这个特性控制层的显示优先级,综合任何一种CSS hack写法就可以简单实现。

<div style="width:760px; height:160px; background:url(http://www.baidu.com/img/logo.gif); position:absolute; top:70px; left:0; z-index:2!important; z-index:1;"></div>
<iframe style="position:absolute; top:70px; left:0; z-index:1!important; z-index:2;" frameborder="0" src="/banner.htm" width="760" height="160"></iframe>

  两层代码如上,通过z-index指定优先级,再综合申明判断客户端,自动指派优先级高低,缺点是增加了一层的载入时间,也可以使用<!--[if gte IE 6]>语法指定IE6解析。

  稍微变通一下,多层重叠、滤镜效果、触发行为,可以实现很多很复杂的效果。注意此属性仅在“相对”“绝对”定位中可用。


上一篇:IE条件注释参考
下一篇:PHP 远程过程调用 —— phprpc
作者:  来源:blog ( 责任编辑:7dspace )
收藏此页】【打印】【关闭
站 内 搜 索
 

热 点 导 读
特 别 推 荐