兼容IE6

Posted on 
1
做网站的都要保存一些兼容的方法，以下内容是一些涉及的是IE6的兼容，请拿好不谢！

1.a标签里嵌套img时，不同浏览器下会出现不同颜色边框：

1
解决：重置样式把border取消(重置样式请参考CSS入门)

2.各个浏览器下图片与图片之间有间隙：

1
解决：用float，或取消img标签的换行

3.清除浮动

1
2
3
4
5
6
7
.clear:after{
	content: "";
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
}

以上清除浮动方法在IE6中无效果

1
解决：触发haslayout:position、float、zoom,因为前两者会影响下面的布局 所以一般采用：.clear{zoom:1;}

在IE6中清除样式有可能需要设置

1
2
3
4
5
6
.clear:after{
	height:0;
	overflow:hidden;
	font-size:0;
	line-height:0;
}

4.opacity在IE6中无效

1
解决：filter:alpha(opacity = 50)；滤镜设置透明度
1
2
3
4
5
.a{
opacity:0.5;
filter:alpha(opacity=50);
}
/*（IE9支持opacity，很多CSS方法在IE9以上才支持）*/

5.ie6有float，有横向margin时，ie双倍间距

1
解决：设置display:inline;

6.在ie6，内容宽高超出我们设置的宽高时，内容会撑开设置好的宽高

1
2
3
要让谷歌浏览器有内容撑开设置好的宽高的特性并兼容IE6可设置min-height和_height

注：_height（仅IE6标识）

7.在ie6下最小高度19px,字体太大会溢出（默认行高）

1
解决：overflow: hidde

8.在ie6下png图片不透明

1
2
3
4
5
6
7
<!--条件注释：-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('*');
</script>
<![endif]-->

9.左浮元素margin-bottom失效

1
解决：用padding

10.ul、ol的li中,如有元素浮动,在ie6中会出现多出几像素的问题

1
解决：li浮动 或者浮动元素inline-block

10.IE6怪异解析之padding与border算入宽高

1
2
原因：未加文档声明造成非盒模型解析 
解决方法：加入文档声明<!doctype html>

11.以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。

1
2
3
4
5
6
7
8
1）字体大小为奇数之边框高度少1px 
解决方法：字体大小设置为偶数或line-height为偶数 

2）line-height，文本垂直居中差1px 
解决方法：padding-top代替line-height居中，或line-height加1或减1 

3）与父标签的宽度的奇偶不同的居中造成1px的偏离 
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度

12.内部盒模型超出父级时，父级被撑大

1
解决方法：父标签使用overflow:hidden

13.line-height默认行高bug

1
解决方法：line-height设值

14.行标签之间会有一小段空白

1
解决方法：float或结构并排(可读性差，不建议)

15.标签高度无法小于19px

1
解决方法：overflow: hidden;

16.左浮元素margin-bottom失效

1
2
3
4
5
解决方法：显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签 
margin- bottom，即(margin-bottom与float不同时作用于一个标签)
``` 

### 17.img于块元素中，底边多出空白

解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

1
2

### 18.li之间会有间距

解决方法：float: left;

1
2

### 19.块元素中有文字及右浮动的行元素，行元素换行

解决方法：将行元素置于块元素内的文字前

1
2
3
4
5

### 20.position下的left，bottom错位

``` 
解决方法：为父级(relative层)设置宽高或添加*zoom:1

21.子级中有设置position，则父级overflow失效

1
解决方法：为父级设置position:relative