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

（1）浏览器兼容性问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题现象：写几个标签，不加样式控制的情况下，各自的margin和padding的差异较大

这是最常见的一个兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0；

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

（2）浏览器兼容性问题二：块属性标签float后，又有横向的margin情况下，在IE6显示的margin比设置的大

问题现象：因为在IE6显示的margin比设置的大，所以在IE6中后面的一块可能就会被挤到下一行中

我们最常用的就是p+CSS布局，p就是一个典型的块级标签，横向布局的时候通常用p float实现，横向间距如果用margin实现就会碰到这种兼容性问题

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

（3）浏览器兼容性问题三：设置较小高度标签（小于10px）在IE6，IE7中会超出自己设置的高度

问题现象：在IE6，IE7中小高度标签不受控制，会超出自己设置的高度

一般在我们设置小圆角背景的标签里，因为在IE8之前的浏览器会给标签一个默认的最小行高的高度，即便设置的高度为空，这个标签的高度还是会达到默认行高

解决方案：在CSS中设置overflow:hidden或者设置行高line-height小于你设置的高度

（4）浏览器兼容性问题四： 行内属性标签，设置display:block后采用float布局，又有横向的margin情况下，在IE6有间距bug

问题现象：在IE6显示的margin比设置的大

行内属性标签，为了设置宽高，我们需要设置display:block，在采用float布局，又有横向的margin情况下在IE6显示的margin比设置的大，不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了，这时还需要在其后面加上display:talbe

（5）浏览器兼容性问题五：图片默认有间距

问题现象：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用

因为img标签是行内属性标签，所以只要不超过容器宽度，img标签都会排在一行里，去掉这个间距使用float

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

（6）浏览器兼容性问题六：标签最低高度设置min-height不兼容

问题现象：这个本身就是一个不兼容的CSS属性

在B/S系统前端开发时，有很多情况下有这种需求。比如，当内容小于300px时，容器高度为300px，当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。

解决方案：如果我们要设置一个标签的最小高度为200px，需要进行设置：

{
   min-height:200px;
   height:auto !important;
   height:200px;
   overflow:visible;
}

（7）浏览器兼容性问题七：透明度的兼容CSS设置

一般在IE中用的是filter:alpha(opacity=0);这个属性来设置p或者块级元素的透明度，而在Firefox中，一般就是直接使用opacity=0;对于兼容的，一般的作法就是书写CSS样式时将2个都写上就能实现兼容。