web前端开发浏览器兼容 前端开发ie浏览器的兼容问题怎么解决？

最近经常有小伙伴私信询问web前端开发浏览器兼容 前端开发ie浏览器的兼容问题怎么解决？相关的问题，今天，我爱编程网小编整理了以下内容，希望可以对大家有所帮助。

web浏览器兼容

什么是浏览器兼容？

在我们的实际开发中会涉及到在多个浏览器比如

firefox，opera，chrome，或者IE的多个版本下进行调试，在不同版本浏览器下会出现显示效果不一的情况，而浏览器兼容就是为了处理这种情况。

浏览器最重要核心的部分是“ 浏览器内核 ”，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

主要浏览器内核有哪些？

1、Trident内核代表产品Internet Explorer

2、Gecko内核代表产品Firefox

3、WebKit内核代表作品Safari    主要用于 Mac OS 系统

4、Presto内核代表作品Opera

5、Blink由Google和Opera Software开发的浏览器排版引擎

1.因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过 通配符 选择器，全局重置样式

2.在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css 预处理器以及前端自动化构建工程帮我们处理。

3.在还原设计稿的时候我们常常会需要用到透明属性，所以解决 IE9 以下浏览器不能使用 opacit。

1.事件兼容的问题，我们通常需要会封装一个 适配器 的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

2.new Date() 构造函数 使用，'2018-07-05'是无法被各个浏览器中，使用new Date(str)来正确生成日期对象的。 正确的用法是'2018/07/05'.

3获取 scrollTop 通过 document.documentElement.scrollTop 兼容非 chrome浏览器

1.快速判断 IE 浏览器版本

<!--[if IE 8]> ie8 <![endif]-->

2.判断是否是 Safari 浏览器

/* Safari */

var isSafari = /a/.__proto__=='//';

3.判断是否是 Chrome 浏览器

/* Chrome */

var isChrome = Boolean(window.chrome);

前端开发ie浏览器的兼容问题怎么解决？

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么

浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都是浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

如何进行Web网页的兼容性测试？

根据软件测试六大特性：我们了解兼容性测试属于“可移植”的一类特性，要想提升软件的用户体验，首先需要满足基于不同浏览器及不同的终端平台适配性，这样才能解决大部分用户体验问题。

Web浏览器类型分为:IE,FF,Chrome,360浏览器、遨游、搜狗、QQ、欧朋浏览器等等.

Web兼容性测试分类：硬件兼容性测试、软件兼容性测试、数据兼容性测试。

Web网页的兼容性平台分为：

1.PC端浏览器的兼容性。

2.APP端H5页面的兼容性测试。

一般产生兼容性问题的原因是什么？

首先：基于PC端也好，基于APP端浏览器或者H5页面也好，都是基于不同的开发语言开发出来的脚本，做成一系列的动态或者静态页面，从而通过与服务器进行资源交互，获取服务器资源，通过前端JS、CSS等脚本的渲染引擎机制来显示信息。

为什么有时候我们使用不同浏览器的打开页面，会存在兼容性的问题？

因为不同的浏览器使用的“内核”不同，而出现兼容性问题。咱们最常见的浏览器就有三种FF/Chrom/IE，这三款浏览器都是使用什么内核呢?

1.IE浏览器基于”Trident内核”

2.FF浏览器基于”Gecko内核”

3.Chrome浏览器基于“Blink内核”

4.国内双内核(360安全浏览器6.0+,搜狗浏览器5.0+,QQ浏览器7.0+,猎豹浏览器5.0+。

那怎么去测试兼容性问题？

1.基于IE浏览器兼容性测试可以使用IE自动切换浏览器版本的功能进行测试

2.基于Chrome与FF由于版本多样化，我们可以使用边界值的方法来覆盖测试

3.为了提升工作效率，我们可以借助自动化测试工具来完成一部分测试，或者通过安装虚拟机来完成兼容性测试。 我爱编程网

4.结合市场用户平台占用率分析，按用户排行榜来分析测试重点。

5.如果由于公司资源不足带来的问题，我们可以借助第三方平台进行测试，例如：云测、众测等平台。

6.关于专项浏览器工具不建议使用，为什么？因为工具是由第三方开发，工具本身存在BUG，所以尽量使用我讲解的以上方法来进行测试。

总结：因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，从而出现兼容性问题，当然除了内核不一样，我们可以发现不同的浏览器他们都有各自的特点，FF浏览器稳定性相对不及Chrome，IE浏览打开速度加载较慢，最受人欢迎的是“Chrome”浏览器，当然兼容性测试不能跟随我们的喜好而去测试，更应该站在用户的角度来分析思考问题，所以通过今天的学习，希望大家对兼容性测试出现的问题有一个全面的理解，同时能够应用到平时的工作中去。

兼容性测试bug案例分享：

以上就是我爱编程网小编整理的内容，想要了解更多相关资讯内容敬请关注我爱编程网。