2025年浏览器兼容性测试总结（浏览器兼容性面试题）

科技前沿 • 2025-04-25 10:19 • 阅读 48

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p><strong>前言&#xff1a;</strong></p>

讯享网

不同的浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种：
第一种：渲染引擎
第二种：js引擎
所以浏览器主要兼容性问题我一般分为两大部分：、

五大浏览器内核Chrome谷歌之前Webkit，已改Blink内核FireFox火狐GeckoSsfari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核

一、css兼容

解决方法：

在css里设置全局的,但是性能不好
一般我们在引入reset.css样式重置；

火狐浏览器
safari谷歌浏览器等使用Webkit引擎的浏览器
Opera浏览器（早期）
IE

问题：常见症状是IE6中后面的一块被顶到下一行。
解决方案：在这个div里面加上display:inline;
4.设置较小高度标签（一般小于10px），在IE6，IE7，页面中高度超出自己设置的高度
解决方案：

给超出高度的标签设置overflow:hidden；
或者设置行高line-height小于你设置的高度；
5.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决方案：
在display：block；
后面加入display：inline；/display：table；

6.IE浏览器div最小宽度和高度不生效的问题
解决方案：

讯享网

讯享网

7.超链接访问过后hover样式就不出现的问题
我们可以简记一个速成口诀：

8.图片默认有间距
解决方案：使用float属性为img布局（所有图片左浮）

9.css hack 解决浏览器

讯享网

二、js兼容
1.时间绑定
IE：
标准浏览器:
2.event事件对象问题

3.event.srcElement(事件源对象)问题
IE:event对象有srcElement属性，但是没有target属性；
Eirefox：event对象有target属性，但是没有srcElement属性.

srcObj=event.srcElement?event.scrElement:event.target;

4.获取元素的非行间样式值：
IE:dom.currentStyle[‘width’]获取元素高度
标准浏览器:window.getComputedStyle(ibj,null)[‘width’];
跨浏览器兼容解决方法

讯享网

5.阻止事件冒泡传播

6.阻止事件默认行为

讯享网

7.ajax兼容问题
IE:ActiveXObject
其他： xmlHttpRequest

在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

跨浏览器兼容解决方法：

2025年浏览器兼容性测试总结（浏览器兼容性面试题）

相关推荐