Home  >  Article  >  Web Front-end  >  IE6和IE7定位的兼容问题简单介绍_html/css_WEB-ITnose

IE6和IE7定位的兼容问题简单介绍_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:30:12818browse

IE6和IE7定位的兼容问题简单介绍:
定位的浏览器兼容性问题很小,就是IE6和IE7对z-index属性的解析上有所差别,并且这两个版本的浏览器在中国存活的估计也不会太长了,所以关于这个兼容性问题有兴趣的朋友可以参阅以下本章节,下面就是一段关于此问题的实例代码。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.box{  width:100px;  height:100px;  position:relative;}.top{  width:50px;  height:250px;  background:red;  position:absolute;  z-index:10}.bottom{  width:50px;  height:60px;  background:blue;  position:absolute;  z-index:5;}</style></head><body><div class="box">  <div class="top"></div></div><div class="box">  <div class="bottom"></div></div></body></html>

以上代码在IE7和IE7以下浏览器与其他浏览器的表现不同.
IE7和IE6:是蓝色覆盖红色
其他浏览器:红色覆盖蓝色。
具体原理这里就不多介绍了,可以参阅下面两篇文章:
1.z-index属性用法可以参阅CSS的z-index属性用法详解一章节。 
2.IE7下z-index问题可以参阅z-index在IE6和IE7的兼容性问题一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13044

更多内容可以参阅:http://www.softwhy.com/divcss/

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn