IE6兼容性问题的小节

http://blog.360dseo.com/html/713.html

作者: 不详

分类: 网络编程

发布时间:2014-1-24 10:40:01

IE6兼容性总结:

###### 一、排版布局注意事项，可以最大化避免出现兼容性问题 ###########

1，body中指定全局字体字号，以消除不同浏览器字体的差别。

2，记得清除漂浮clear。(在具有float元素的容器底部加入清除漂浮)

3，尽量使用padding代替margin。

4，使用绝对定位进行布局时，需明确指定z-index, top, left；避免绝对定位旁边存在float元素.

5，尽量避免使用半透明png图片(PNG-24)，使用GIF代替；若使用PNG-24，用PNG修复补丁修复之；

 

调整HTML盒子位置的方法:

A. _margin-top:-10px;  ----向上移动10px

B. _position:relative; _top:-10px;  ----向上移动10px

 

###### 二、IE6常见问题解决 ###########

//IE6无法遵从样式指定的宽度：
overflow: hidden;

//IE6无法占满一行：
给它指定一个确定的宽度。

//IE6无法设置微型高度：
overflow:hidden; font-size:0px;

 

//清除IE6双倍margin BUG, 给float元素加入: (当float与margin同时存在时)

若同时有float及margin，加入display:inline。

 

//避免注释两条连用.

 

###### 三、不同浏览器微调 ###########
#nav{
 margin: 10px;  
 *margin: 11px;  
 _margin: 12px;   
 margin: 13px\0/; 
}

@-moz-document url-prefix() {
 #nav{ width:200px; }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #nav{ width:300px; }
}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 #nav{ width:400px; }
}

 

 

所有的IE可识别
<!--[if IE]> HTML内容HTML内容 <![endif]-->

仅IE6可识别
<!--[if IE 6]> HTML内容HTML内容 <![endif]-->

仅IE7可识别
<!--[if IE 7]> HTML内容HTML内容 <![endif]-->

IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 6]> HTML内容HTML内容 <![endif]-->