超全的IE兼容性问题及解决方案

1.怪异盒模型：在老版本IE下不设置文档声明，页面就会进入怪异盒模型解析，所以要设置文档声明；

2.IE6下，子元素的宽高超出父级的宽高 ：可以把父级设 置好的宽度撑开

3.在IE6下，块属性元素的高度小于19px：高度会按照19px显示处理
（解决办法：overflow: hidden; 把显示于高度之外的多余部分不显示)

4.在chrom下，文字大小小于12px：文字大小最小只能设置12px，设置低于12px都会当成12px处理
（解决方法：用图片代替）

5.在IE6下，1px的点线会被显示成虚线：dotted会显示成dashed
(解决方法：用图片代替）

6.在IE6下，边框加transparent的情况：边框还是会显示黑色
（解决方法：border-style设置成虚线）

7.对于HTML5新增标签部分浏览器无法识别问题：用JS定义
{document.createElement("header") 然后把header的display：block；}

8.在IE6,7下不支持给块标签加inline-block: 只是加给块元素不支持，加给内嵌式支持的并且可以触发haslayout,加给块加了之后没反应，块标签还是独占一行
（解决方法：在inline-block下添加以下代码{display：inline; zoom: 1;}）

9.在IE6下父级有边框造成子元素margin失效的问题：
（解决方法：触发haslayout)

10.在IE6,7下，浮动元素的父级设置了宽度的话，不需要清浮动

11.元素浮动之后，如果宽度可以固定，一定记得设置固定宽度，如果宽度需要内容撑，就给它里面的块元素都加上浮动

12.IE6下双边距BUG在IE6下，块元素有浮动有横向的margin，横向的margin值会被放大成两倍
（解决方法： display：inline; 把块元素变成内嵌)

13.IE6下最后一行下margin失效问题 在IE6下，一行元素的宽度之和 和 父级的宽度相差大于等于3，则最后一行元素的下margin失效
（解决办法： 无（所以需要考虑IE6兼容性写样式时尽量不要用下margin，可以用给父级加下padding的方法代替）

14.在IE6下元素内容被复制的问题 在IE6下元素的宽度和父级宽度相差小于3px，并且两个浮动之后之间有注释或者内嵌，元素内容会被复制
（解决方法：可以用div把注释或者内嵌元素包起来）

15.在IE6中li里的内容浮动了之后li下边产生间隙的问题 在IE6中，li本身没有加浮动，但是 li 的内容都浮动了，或者有两个以上的浮动，li的下边就会产生几个px的间隙
（解决方法： 1 给li 加浮动 2给li 加vertical-align：top）

16.在IE6下绝对定位元素消失掉的问题（在IE6下，浮动元素和绝对定位元素是同级关系并且浮动元素的占位宽度和父级小于3px，绝对定位元素会消失掉）
（解决方法： 把绝对定位元素单独包起来）

17.在IE6下，父级的宽高是奇数的话，元素的right值和bottom值会有1px的偏差
（解决办法：无）

18.在IE6，7下，子元素如果有相对定位的话，父级的overflow包不住它
（解决方法： 给父级也加相对定位）

19.IE8和IE8之前浏览器不支持opacity的问题
（解决方法：filter:alpha(opacity= 40 ) filter是IE特有的属性，在IE8及之前的版本才会被识别)

20.在IE6，7下不支持border-spacing这条样式
（解决方法：1. border-collapse：collapse（会合并边框）2.cellspacing(行间样式，不会合并边框）

21.在IE6，7下input上下各有1px的间隙
（解决方法： 给input加浮动）

22.在IE6下，输入类型表单控件上下各有1px的间隙
（解决方法：给控件加浮动）

23.在IE6下，输入类型表单控件border:none;无效
（解决方法：1. border=“0” 2 重置input的背景）

24.在IE6，7下，输入类型的表单控件，输入文字的时候，图片会随着文字一起移动
（解决方法： 把图片给父级）

25.在IE6、7下，首行缩进可控制元素 text-indent会影响input等元素的位置
（解决方法：用padding-left来控制距离）

26.在IE6下，只支持link，hover，visited，active这四个伪类，并且只支持添加给a标签；

27.在IE7下，只支持link，hover，visited，active这四个伪类，可以添加给其它标签；