不一样浏览器兼容性的区别

常见的浏览器兼容性问题与解决方案大体有如下九种形式： 

　　1、不一样浏览器的标签默认的外边界和内填充不一样

　　问题表现：不加样式控制下，margin和padding差别较大

　　解决方案：css里 *{margin:0; padding:0;}

　　备注：这是最多见也是最易解决的一个兼容问题，几乎全部的css文件开头都会用通配符*来设置各个标签外边界和内填充为0

 

　　2、块属性标签float后，又有横向的margin状况下，在IE6显示margin比设置的大

　　问题表现：IE6后面的一块被顶到下一行

　　解决方案：在float的标签样式控制中加入display:inline;转化为行内属性

　　备注：横向浮动的div布局，使用上margin进行边界设置时，必然会碰到此问题

 

　　3、设置较小高度标签(通常小于10px)，在IE六、IE7，遨游中高度超出设置高度值

　　问题表现：IE六、7和遨游里这个标签的高度不受控制，超出本身设置的高度

　　解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

　　备注：通常出如今设置小圆角背景的标签里。出现该问题缘由是IE8以前的浏览器都会给标签一个最小默认行高的高度，即便标签是空内容，标签的高度仍是会有默认行高。

 

4、行内属性标签，设置display:block后采用float布局，又有横向的margin状况，IE6间距bug

　　问题表现：IE6的间距比超过设置的间距

　　解决方案：在display:block;后面加入display:inline;display:table;

　　备注：行内属性标签，为了设置宽度，须要设置为display:block;(表单元素除外)在用float布局且有横向margin后，在IE6下，就具备了块属性float后的横向margin的bug。因为设置为display:inline，高度失效，全部在后面补上display:table。

 

　　5、图片默认有间距

　　问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起做用

　　解决方案：使用float属性为img布局

　　备注：img标签是行内属性标签，只要不超出容器高度，img会排在一行里，使用float是比较好的选择

 

　　6、标签最低高度设置min-height不兼容

　　问题表现：min-height自己就是一个不兼容的css属性，因此设置min-height时不能兼容全部浏览器

　　解决方案：若是设置一个标签最小高度为200px，须要进行设置 {min-height:200px; height:auto !important; 
height: 200px; overflow:visible;}

　　备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。

　　7、光标手形

　　问题表现：firefox不支持hand，但ie支持pointer

　　解决方案：统一使用cursor:pointer;

 

　　8、字体大小定义不一样

　　问题表现：对字体大小small定义不一样，Firefox为13px，而IE为16px，差异比较大

　　解决方法：使用指定的字体大小如14px或者使用em

 

　　9、IE6 3px bug

　　问题表现：左侧div浮动left，右边DIV能够接着横向排列，造成典型一列固定，第二列自适应，IE6出现之间3px间隙

　　解决方法：对左侧left的盒子补上_margin-right: -3px;