前端浏览器兼容问题以及解决方法

时间：2025-03-05 07:38:05

首先：

不同浏览器的内核不尽相同，所以浏览器对网页的解析也有所差异。

浏览器的内核主要分为两种： 一、 渲染引擎 二、JS引擎。

所以浏览器的兼容问题 一般是  css兼容问题，js兼容问题。

二、浏览器的渲染内核

浏览器 内核（渲染引擎）
Chrome谷歌 之前Webkit，已改Blink内核
FireFox火狐 Gecko
Safari苹果 Webkit
IE Trident
Opera欧朋 现已改用Google Chrome的Blink内核

三、css兼容问题

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

问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决办法：第一种：我们一般使用 通配符（*）设置margin：0；padding：0；性能不好！

                 第二种：一般我们会引入样式重置 (推荐)

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

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

哪些css3属性需要加：

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

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

常见症状：IE6中后面的一块被顶到下一行

解决办法：这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline

4.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

常见症状：设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.

解决办法：

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

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

常见症状：被点击访问过的超链接样式不在具有hover和active了

解决办法：是改变CSS属性的排列顺序: L-V-H-A

<style type="text/css">

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

</style>

6.图片有默认间距

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

解决办法：（font-size：0）    使用float属性为img布局(所有图片左浮)

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

不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。
下面是css hack写法：

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

四、js兼容问题

后续更新！！！
 

相关文章