常见的浏览器兼容性问题以及解决方案

1 浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案一：
可以使用normalize.css来清除默认样式

解决方案二：也可以使用如下代码：
body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
解决方案三：使用通配符设置 ：

*{ margin:0; padding:0; }
2. 浏览器兼容问题二：
我们常用的div布局，div是块级元素，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题: 在IE6显示margin比设置的大,常见症状是IE6中后面的一块被顶到下一行。
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
3. 浏览器兼容问题三：
元素的高度设置若小于10px的话，IE6、IE7这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
问题出现的原因：IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
4. 浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
碰到频率：20%
问题出现的原因：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
解决方案：添加两句话display:inline；display:talbe；
5. 浏览器兼容问题五：几个img标签放在一起的时候，图片默认有间距，使用通配符设置margin,padding为零也不能解决此问题。
碰到频率：20%
问题出现的原因：部分浏览器的img标签之间会有个间距
解决方案：使用float属性为img布局。使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，故不推荐此方法。
6. 浏览器兼容问题六：标签最低高度设置min-height不兼容问题
碰到频率：5%
问题出现的原因：。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !Important; height:200px; overflow:visible;}
7. 浏览器兼容问题七：标签最低高度设置min-height不兼容问题
碰到频率：5%
问题出现的原因：。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}
8. 浏览器兼容问题八：透明度属性
问题出现的原因：针对IE浏览器
解决方案：IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）,兼容其他浏览器：opacity：value；（取值范围0–1）
Alpha：设置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
9. 浏览器兼容问题九：按钮默认大小不一
解决方案：
1）用a标签来模拟按钮，添加样式；
2）如果按钮是一张背景图片，那么直接给按钮添加背景图；
10. 浏览器兼容：
解决方案：hacker解决不兼容问题
IE6认识的hacker 是下划线_ 和星号 *

IE7 认识的hacker是星号 *
所有浏览器 通用
height: 100px;

IE6 专用
_height: 100px;

IE6 专用
*height: 100px;

IE7 专用
*+height: 100px;

IE7、FF 共用
height: 100px !important;
11. 其他兼容技巧
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand只适用于 IE.