兼容性问题有哪些？
???1、IE6下怪异盒模型
标准盒模型：总宽度=width+padding+border
?? 怪异盒模型：总宽度=width
???2、IE6下最小高度问题
IE6下块元素高度小于19px，会被当做19px来处理
?? 解决办法 ：
??? 1、overflow:hidden ??推荐
??? 2、font-size: 0;
???3、IE6下不支持1px的点线
IE6不支持一像素的点划线，用背景图代替
???4、IE6下内容会把父级的高度撑开
IE6下内容会把父级的高度撑开
??解决办法
???overflow: hidden;
???5、IE6下只支持给a标签添加伪类
IE6不支持除了a标签以外标签的伪类
???6、IE6、7下不支持给块标签加display:inline-block
IE67不支持块元素display:inline-block
???7、IE8以及IE8以前的浏览器都不支持opacity
IE8以及IE8以前的浏览器都不支持opacity
?解决办法
??? 用filter
???8、IE6不支持固定定位
IE6不支持固定定位，可以用js来解决
???9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙
IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙
?? 解决办法
??? 给后面元素也添加浮动
???10、IE6下双边距问题
IE6下块元素有浮动，并且有横向margin(左右)，那最终的距离是原来的两倍
??解决方法
?? 给元素添加display:inline;
???11、IE67下父级有边框，子级有margin的话会不起作用
在IE67下，父级有边框，子级有margin，那子级的margin会不起作用
??解决办法
??? 触发父级的layout
???12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）
IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效
??IE7下，不管宽度相差多少，直接失效
? 解决方法：
??? 用padding解决
???13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效
在IE6下，元素中除了文字之外，还有inline-block类型元素，那元素的行高会失效
??解决办法： 分别包起来，分别设置行高
???14、IE6下文字溢出的问题
在IE6下，两个浮动元素中间有注释或者空行内标签，父级的宽度和子元素宽度相差小于3px，元素内的文字会被复制出来
??解决办法
???1、把注释或者行内元素用div包起来
???3、把父级的宽度加3px
???15、IE67li间隙问题
IE67下，li里有左右浮动的元素，会造成每个li下边有间隙的问题
??解决办法
???1、给li加vertical-align: middle;
???2、给li浮动
???16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
??解决办法
???给父级也加相对定位
???17、IE6下同一层级的浮动元素会盖住绝对定位元素
IE6下同一层级的浮动元素会盖住绝对定位元素
? 解决办法
?? 给定位元素外面嵌套一个层
???18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
在IE6下，定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
???19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
? 解决方法
给元素添加相对定位，或者给父级overflow:hidden;
???20、IE67下输入类型的表单控件，上下两边各有1px的间隙
IE67下输入类型的表单控件，上下两边各有1px的间隙
??解决办法
??? 给控件加浮动
???21、IE8以及IE8之前不识别H5标签
解决办法：不使用
???22、IE6不支持png透明图片
IE6不支持png-24透明图片
兼容性问题--HTML+CSS
原文地址：http://www.cnblogs.com/shengnan-2017/p/7676842.html