常见的浏览器兼容及一些解决方案

常见的浏览器兼容及一些解决方案

-------- 由于各大主流浏览器由不同的厂家开发，使用的内核版本是不一样的，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床

---------以下是一些常见的兼容性问题(^ _ ^)：

1、 不同浏览器的标签默认外补丁margin和内补丁padding不同
解决方法:

hack1: 使用css通配符设置margin和padding为0，
hack2: 或者给每个有内外间距的标签设置margin和padding为0

2、 给子元素添加margin-top后，浏览器会错误的把margin-top给了父元素

解决方法:

hack1: 给子元素或者父元素设置浮动（float）
hack2: 给父元素添加上边框（border-top:）
hack3: 给父元素添加overflow：hidden；

3、 在网页中插入图片时，图片会向下方撑大大约三像素。


解决方法：

hack1: 使用 vertical-align:top/bottom/middle解决，使用其中一个即可
hack2: 使用 display:block;改变元素类型也可以解决

4、 块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）
解决方法：

hack1: 在float标签样式控制中加入display:inline

5、cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明（鼠标指针bug）
解决方法：

hack1： 直接使用cursor:pointer

6、 当图片加在IE上的浏览器会出现边框
解决方法：

hack1： 给图片加border:0;或者border：none；

7、 使用表单元素时，表单元素距离顶部间距不一致
解决方法：

hack1： 给表单元素添加浮动：float:left;

8、 浏览器的字体不统一
解决方法：

hack1： 给body统一设置字体

9、 浏览器的透明度兼容
解决方法：
一条代码全解决：

    .transparent_class {  
               filter:alpha(opacity=50);  
               -moz-opacity:0.5;  
               -khtml-opacity: 0.5;  
               opacity: 0.5; 
                }   

10、 谷歌浏览器最小字号支持到12px，12px以下的字号不支持
解决方法：

hack1： 直接切图
hack2： 在html或者body里添加一句谷歌浏览器专有的属性：-webkit-text-size-adjust:none;（新版本的谷歌浏览器里已失效）
hack3： 使用CSS3的一个缩放属性：transform:scale()，来使字号改变大小

11、在IE7或者IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
解决方法：

hack1： 给元素添加声明：font-size:0;
hack2： 给元素添加声明：overflow:hidden;

12、 在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加 50%大于100%的情况。（也会受系统影响）
解决方法:

hack1：给右面的浮动元素添加声明：clear:right;

13、如果设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在ie6上是在顶部的
解决方法：

hack1： 给input添加一个行高等于它的高度。