对浏览器css兼容性的学习理解及问题解决汇总_html/css_WEB-ITnose
1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。
2. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。
二、浏览器兼容性相关问题及其解决思路
1、目前，各主流浏览器的新版本，对于 W3C 的标准支持很好，因此，首先保证代码符合 W3C 的标准，这是解决浏览器兼容问题的前提。
其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。
2、不同浏览器默认的内外边距不同的问题
解决： *{margin:0;padding:0;}
3、不同浏览器水平居中的问题：ie6-7文本居中，嵌套的块元素也会居中 ，ff /opera /safari /ie8文本会居中，嵌套块不会居中
解决： 块元素设置 margin-left:auto;margin-right:auto 或margin:0 auto; 或外层嵌套div设置
浮动块元素的居中：
4、不同浏览器垂直居中的问题 ： 在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置
vertical-align:middle，但是文本框的内容不会垂直居中
解决： 给容器设置一个与其高度相同的行高 line-height:与容器的height一样
5、不同浏览器关于高度问题 ： 如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过 多时，ie6下会自动增加高度、其他浏览器会超出边框
解决： 1.设置overflow:hidden; 2.高度自增height:auto!important;height:100px;
6、IE6 默认的div高度问题： ie6默认div高度为一个字体显示的高度，在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字 体的高度
解决：为这个容器设置下列属性之一 1、设置overflow:hidden; 2、设置line-height:1px; 3、设置zoom:0.08
7、IE6 最小高度(宽度)的问题： ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
解决： 使用ie6不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !important; height:200px;
8、td高度的问题 ： table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
解决： 设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示
9、div嵌套p时，出现空白行问题：div中显示
文本
，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。解决：设置p的margin:0px，再设置div的padding-top和padding-bottom
10、IE6-7图片下面有空隙的问题：块元素中含有图片时，ie6-7中会出现图片下有空隙
解决：1、在源代码中让
推荐阅读