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

不同浏览器的内核不同,所以各个浏览器对网页的解析存在一定的差异。

浏览器内核主要分为2种,一是渲染引擎,二是js引擎

所以浏览器兼容性问题一般指:css兼容、js兼容

 一、css兼容

1. 不同浏览器的标签默认的margin和padding不同

解决方案:

  1. CSS里 *{margin:0;padding:0;} 但是性能不好
  2. 一般我们会引入reset.css样式重置;

2. css3新属性,加浏览器前缀兼容早期浏览器

解决方案:

-moz-  /* 火狐浏览器 /
-webkit-  /
 Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o-  /
 Opera浏览器(早期) /
-ms- /
 IE */

哪些css3属性需要加:

1.定义关键帧动画 @keyframes
2.css3中的变形(transform)、过渡(transtion)、动画(animation)
3.border-radius 圆角
4.box-shadow  盒子阴影
5.flex  弹性布局
....

使用:


.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

3. 块属性标签float后,又有横行的margin情况下,IE 浏览器margin加倍的问题

问题症状: 常见症状是IE6中后面的一块被顶到下一行

解决方案: 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

<divid=”imfloat”>
相应的css为
# imfloat{
float:left;
margin:5px;//IE下理解为10px
display:inline;//IE下再理解为5px}

4. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状: 设置div高度小于10px,IE6、7和遨游里div的高度,超出自己设置的10px.

解决方案:

  1. 给超出高度的标签设置overflow:hidden;
  2. 或者设置行高line-height 小于你设置的高度。

5. 行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

问题症状: IE6里的间距比超过设置的间距

解决方案: 在display:block;后面加入display:inline;display:table;

6. IE浏览器div最小宽度和高度的问题

问题症状: IE浏览器div最小宽度和高度不生效

IE不认得min-这个定义,但实际上它把正常的widthheight当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-widthmin-height的话,IE下面根本等于没有设置宽度和高度。

#box{
  width: 80px;
  height: 35px;
  }
html>body #box{
 width: auto;
 height: auto; 
 min-width: 80px; 
 min-height: 35px;
 }

7. 超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

<style type="text/css">

a:link {}
a:visited {}
a:hover {}
a:active {}

</style>

8. 图片默认有间距

问题症状: 几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。

解决方案: 使用float属性为img布局(所有图片左浮)

备注: 因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

9. css hack解决浏览器兼容性

不同浏览器,识别不同的样式,csshack本身就是处理浏览器兼容的。

background-color:yellow0; 0 是留给ie8的
+background-color:pink;   + ie7定了;
_background-color:orange; _专门留给神奇的ie6;

二、js兼容

1. 事件绑定

IE: dom.attachEvent();
标准浏览器: dom.addEventListener(‘click',function(event){},false);

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值第三值默认false,表示事件冒泡方式。

如果浏览器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值