浏览器常见的兼容都有哪些？以及解决方法是什么？

常见浏览器的兼容

A、跟img相关的兼容以及解决方法

1) 图片有边框BUG

     描述：当图片加<a href=“#”></a>在IE上会出现边框

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

img{border:0;/*border:none;*/}

2）图片缝隙

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

     hack1:将<img>转为块状元素，给<img>添加声明：display:block;

img{display:block}

     hack2：给img添加声明 vertical-align：top/middle；

img{vertical-align：top;/*vertical-align：top;*/}

B、表单相关的兼容以及解决方法

1）表单元素距离顶部间距不一致

     hack:给表单元素添加声明：float:left;

input{float:left;}

C、其他相关兼容和解决方法

1）margin-top的兼容

     子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素

     hack1:给子元素或者父元素设置浮动

.box{float:left;}

   或者

.box p{float:left;}

     hack2：给父元素添加上边框

.box{border:1px solid #fff;}

     hack3：给父元素添加overflow：hidden；

.box{overflow:hidden;}

2）鼠标指针bug

     描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明。

     hack：cursor:pointer

div{cursor:pointer;}

3）透明属性

     兼容其他浏览器写法：opacity:value;(value的取值范围0-1;)

div{opacity:0.5;}

     IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100(整数)

div{opacity:0.5;filter:alpha(opacity=50);}

4）谷歌浏览器最小字号支持到12px，12px以下的字号不支持

     hack1：直接切图

     hack2：在html或者body里添加一句谷歌浏览器专有的属性  

html,body{ -webkit-text-size-adjust:none; }
/*  注意点：在新版本的谷歌浏览器里已经无效。*/

        hack3：CSS3的一个缩放属性：transform:scale()

.a3{font-size: 10px;transform: scale(0.83);float: left;transform-origin: left;}
 /*这个数字0.833，是缩放比例，可以根据你自己的情况不同而不同。*/

5）所有浏览器的字体不统一

     hack：给body统一设置字体

body{font-family:微软雅黑;}

 

IE浏览器的相关兼容 

A、图片png24格式的兼容，png24格式在IE6上不透明

     hack1：把png24格式换成png8或者GIF格式

     hack2：代码如下

div{
    background:url(i/bg.png) no-repeat 0 0;
     _background:none; 
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='static/css/i/bg-deal-price.png');
}

B、默认高度 (如果是需要看不见一定要加height：0；如果是需要其他的数值，那么就给其他的数值)

描述：在IE7或者IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）

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

div{height:0;font-size:0;}

hack2：给元素添加声明：overflow:hidden;

div{height:0;overflow:hidden;}

C、双倍浮向（双倍边距）（只有IE6出现）

描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。

hack:给浮动元素添加声明：display:inline;

li{float:left;margin-left:20px;display:inline;}

D、在IE6及更低版本的浏览器里，如果想去掉input的默认边框，不能设置border：none；

hack：设置input{border：0；}

img{border:0;}

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

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

input{height:28px;line-height:28px;}

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

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

div{clear:right;}

G、IE7及以下浏览器li有时候会莫名的向下撑大3-4像素。

hack:给li添加一个 +margin-top：-3px或者-4px

li{+margin-top:-3px;}