浏览器兼容性问题与解决方案

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

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

出现概率：100%

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

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

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

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

出现概率：90%（浮动布局最常见的兼容问题）

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

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

三、设置较小高度标签（一般小于10px），在IE6、IE7，遨游中高度超出设置高度值

问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

出现概率：60%

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

备注：一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度，即使标签是空内容，标签的高度还是会有默认行高。

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

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

出现概率：20%

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

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

五、图片默认有间距

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

出现概率：20%

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

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

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

问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器

出现概率：5%

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

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

七、透明度的兼容css设置

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)

FF:opacity:0.6

备注：最好两个都写，并将opacity属性放在下面。

八、常见的CSS hack处理手段

IE6识别_和*

IE7和遨游识别*

FF识别 !important

IE8识别\9

所有设置时注意顺序：height:200px; *height:150px; _height: 100px;

九、float闭合

问题表现：多个内部div浮动对齐时，父元素高度不对

出现概率：20%

解决方案：上代码

.clearfix:after {

    display: block;

    height: 0;

    clear:both;

    visibility: hidden;

}

.clearfix {

    display:inline-block;

}

.clearfix {

    display:block;

}

十、ul和ol列表缩进问题

清除ul、ol等列表的缩进时，样式需要写成：

list-style:none;margin:0;padding:0;

其中margin属性对IE有效，padding属性对Firefox有效

十一、css圆角问题

IE7以下版本不支持圆角

FF: -moz-border-radius: 4px; 单边圆角:-moz-border-radius-topleft: 4px;

Chrome: border-radius: 4px;

IE7以下背景圆角需要采用圆形图片定位方式处理，边框圆角可以采用累计效果拼接

十二、光标手形

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

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

十三、字体大小定义不同

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

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

十四、IE6 3px bug

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

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