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

常见浏览器的兼容

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;}

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值