浏览器兼容性问题及其解决方案

news2024/9/25 13:21:36

一、认识浏览器

四大内核： Blink、Gecko、WebKit、Trident (不再活跃)

主流浏览器：
IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核)

二、了解兼容问题

W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。

然而，这对开发者来说，是好事，也是坏事。
说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如 -moz，-webkit 开头的样式)，对W3C标准也是个推进；
说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。

1、什么是浏览器兼容性问题

是指 不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。
即：同样的代码，在不同的浏览器上显示的页面效果不一样。

2、不一样的原因是什么

浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

3、为什么浏览器会存在兼容问题？

  • 同一浏览器，版本越老，存在 bug 越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。
  • 不同浏览器，核心技术(内核)不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。
  • 设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。

从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：

  • 渲染相关：和 样式 相关的问题，即体现在布局效果上的问题。
  • 脚本相关：和 脚本 相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
  • 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

不规则的嵌套：

<div>
   <li>新闻标题一</li>
   <li>新闻标题一</li>
   <li>新闻标题一</li>
</div>

div 中直接嵌套 li 元素是不合标准的，li 应该处于 ul 内。此类问题常见的还有 p 中嵌套 div， table等元素。

不规范的DOM接口和属性设置：

document.all.a_name.style.top = 35;

上面代码中 top 的值，其实应该是一个字符串值，需有单位。例如：35px。

总之，人为的原因也占很大一部分。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug的存在，和开发者对标准的不了解。

比如，如果要做一个功能，功能是想让鼠标悬停在 img 元素上方时，可以出现提示信息，经常针对 IE 做开发的人，可能会使用 img 元素的 “alt” 属性，但其他浏览器中就是不给 “alt” 属性面子。因为 W3C 标准中规定要去做这件事的属性是 “title”，大多浏览器符合标准，IE 不符合，这是 IE 浏览器内核的问题；开发者不知道 “title” ，不遵循标准去写代码，是开发者的问题。

所以，一个问题分两半，浏览器和开发者都有责任。既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的 bug 和不合标准的地方，当某一天 IE 的 “alt” 不能用于提示了，还有人用这个错误的属性去显示提示么？

从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。

三、处理兼容问题的思路

1、要不要做？

（1）从产品的角度看：产品的受众、受众的浏览器比例、效果优先还是基本功能优先。

（2）成本的角度：有无必要做这个兼容。

2、做到什么程度？

让哪些浏览器 支持 哪些效果

3、怎么做？

（1）根据兼容需求选择技术框架/库(如 jquery 1.x.x )。
（2）根据兼容需求选择兼容工具： html5shiv 、 Respond.js 、 CSS Reset 、 normalize.css 、 Modernizr.js 、 postcss 。
（3）条件注释、 CSS Hack 、 js 能力检测做一些修补。
Hack ： CSS 中， Hack 是指一种兼容 CSS 在不同浏览器中正确显示的技巧方法，修补 bug 的方法。
Filter ：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲， Filter 是 hack 方法中的一种。

这里推荐一个网站，把css转换成兼容的
http://autoprefixer.github.io/

推荐https://caniuse.com/这个查询网站。它是一个针对前端开发人员定制的一个查询CSS、JS、HTML5、SVG在主流浏览器中特性和兼容性的网站，可以很好的保证网页在浏览器中的兼容性。有了这个工具我们就可以快速的了解到代码在各个浏览器中的兼容情况了，强烈推荐一波👍
在这里插入图片描述

4、渐进增强和优雅降级

（1）渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
（2）优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

四、JS兼容

1、vue项目在IE11下一片空白

原因：
IE10浏览器解析不了es6的语法，需要我们使用babel（Babel是一种工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript）。但是Babel 默认只转换新的 JavaScript 语法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。

解决方法1：babel-polyfill
在vue项目中安装babel-polyfill，polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。

npm install --save-dev babel-polyfill

然后在mian.js中引入babel-polyfill（要在引入vue，vuex，elementui 之前引入，直接写在第一句）
import ‘babel-polyfill’;
注意： vue不持之ie8 以及之前的版本

这里介绍的是babel-polyfill的完整导入，如果为了性能考虑，你还可以针对ie的报错信息进行自动按需导入，如promise之类。
解决方法2：core-js
你可能听过’babel-polyfill’，babel-polyfill 融合了 core-js 和 regenerator-runtime,因此’babel-polyfill’ 本质就是’corejs’。
core-js 是 babel-polyfill 的底层依赖，通过各种奇技淫巧，用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范。

npm i --save core-js

在main.js入口文件中引入:

2.'core-js' 导入几种形式：
// 导入所有新提案api
import "core-js";
// 唯一稳定的'core js'功能-es和web标准
import "core-js/stable";
// 仅支持稳定的ES功能
import "core-js/es";
// 只导入指定api
import "core-js/features/set";

import "core-js/stable/set";
import "core-js/es/set";

总结：简单使用，不太考虑优化： 1.npm i --save core-js 2.main.js入口文件中导入import “core-js”;
推荐使用：兼容性推荐使用core-js,因为core-js包含了babel-polyfill，且babel-polyfill已经逐步放弃使用了

2、addEventListener 与 attachEvent 区别

attachEvent ——兼容：IE7、IE8；不兼容 firefox、chrome、IE9、IE10、IE11、safari、opera。
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容 IE7、IE8

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) { // W3C标准
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) { // IE
    var r = elm.attachEvent('on' + evType, fn); // IE5+
    return r;
  } else {
    elm['on' + evType] = fn; // DOM事件
  }
}

3、事件对象的兼容

	e = ev || window.event

4、滚动事件的兼容

scrollTop = document.documentElement.scrollTop || document.body.scrollTop

5、阻止冒泡的兼容

if (e.stopPropagation) { 
	e.stopPropagation()
} else {
	e.cancelBubble = true
 }

6、阻止默认行为的兼容

link.onclick = function(event) {
  // 执行自定义逻辑
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  return false;
};

7、const 问题

Firefox下，可以使用 const 关键字或 var 关键字来定义常量；IE下，只能使用 var 关键字来定义常量。
解决方案：统一使用 var 关键字来定义常量。

8、event.x 与 event.y 问题

IE下，event 对象有 x、y 属性，但是没有 pageX、pageY属性；Firefox下，event 对象有pageX、pageY属性，但是没有 x、y属性。

var myX = event.x ? event.x : event.pageX; 
var myY = event.y ? event.y : event.pageY;

9、禁止选取网页内容

在Firefox下需要用CSS禁止选取网页内容，在IE用JS禁止

-moz-user-select: none; // Firefox
obj.onselectstart = function {return false;} // IE

五、CSS兼容

1、ormalize.css

使用ormalize.css 抹平差异，同时可以定制自己的 reset.css，例如通过通配符选择器或者标签选择器（推荐），全局重置样式

2、CSS3兼容前缀表示

写法内核浏览器
-webkit-webkit渲染引擎chrome/safari
-moz-gecko渲染引擎Firefox
-ms-trident渲染引擎IE
-o-opeck渲染引擎Opera
.box{ 
  height: 40px; 
  background-color: red; 
  color: #fff;
  border-radius: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

可以使用 Autoprefixer 是一个用于自动添加 CSS 浏览器前缀的工具，以确保你的样式在不同浏览器中正确地显示。它可以根据 Can I Use 数据库来确定需要添加哪些前缀，以满足特定的浏览器兼容性要求。

安装Autoprefixer

npm install autoprefixer --save-dev

配置 Autoprefixer：

// .browserslistrc
last 2 versions
> 1%
IE 11
// 这个配置表示支持最新的两个浏览器版本
// 全球使用率超过1%的浏览器，以及 Internet Explorer 11。

使用 Autoprefixer：

const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer(),
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

在上述示例中，postcss-loader 用于调用 Autoprefixer 插件。

Autoprefixer 会根据你指定的目标浏览器版本自动添加适当的前缀，以确保样式在这些浏览器中正确渲染。这简化了开发人员在编写样式时考虑兼容性的工作。

3、图片加a标签在IE9中会有边框

img{border：none}

4、IE9以下浏览器不能使用opacity

Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter

opacity: 0.7; /*FF chrome safari opera*/ 
filter: alpha(opacity:70); /*用了ie滤镜,可以兼容ie*/

5、cursor兼容问题

统一使用 {cursor：pointer}

6、a标签css状态的顺序

按照link–visited–hover–active 的顺序编写

7、在Chrome中字体不能小于10px

p{font-size: 12px; transform: scale(0.8);}

…

这里推荐一个网站，把css转换成兼容的

http://autoprefixer.github.io/

六、移动端兼容问题

1、禁止iOS弹出各种操作窗口

-webkit-touch-callout:none

2、禁止iOS和Android用户选中文字

-webkit-user-select:none

3、iOS下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

4、Android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

5、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

6、在Android上placeholder文字设置行高会偏上

input有placeholder情况下不要设置行高

7、overflow: scroll或auto；在iOS上滑动卡顿的问题

-webkit-overflow-scrolling: touch;

8、iOS中日期如：2022-02-22 00:00:00格式的时间转时间戳不成功

需要将时间中的’00:00:00去除之后才能转为时间戳’

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1263237.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023年通过已经认证的微信公众号注册微信小程序

2023年通过已经认证的微信公众号注册微信小程序

登录已经认证的微信公众号 注册完成后&#xff0c;打开微信公众平台的网址&#xff0c;用账号密码的方式登录
阅读更多...
BEVDepth: Acquisition of Reliable Depth for Multi-View 3D Object Detection 论文阅读

BEVDepth: Acquisition of Reliable Depth for Multi-View 3D Object Detection 论文阅读

论文链接 BEVDepth: Acquisition of Reliable Depth for Multi-View 3D Object Detection 0. Abstract 提出了一种新的 3D 物体检测器&#xff0c;具有值得信赖的深度估计&#xff0c;称为 BEVDepth&#xff0c;用于基于相机的鸟瞰 (BEV) 3D 物体检测BEVDepth通过利用显式深…
阅读更多...
Python之基础语法和六大数据类型

Python之基础语法和六大数据类型

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
阅读更多...
VMware虚机重启后静态IP不生效

VMware虚机重启后静态IP不生效

配置好一套虚机之后&#xff0c;因为重启电脑&#xff0c;导致虚机的静态ip配置不生效&#xff0c;xshell连接不上虚机。以下是自查和解决方案&#xff1a; 1.使用su -进入root用户 2.查看打开虚机的teminal窗口查看配置的ip文件&#xff1a;vim /etc/sysconfig/network-script…
阅读更多...
初始化的内容写到析构函数中。。。。。。。

初始化的内容写到析构函数中。。。。。。。

大概是&#xff0c;把应该在构造函数中初始化的堆栈窗体代码写到了析构函数中。。。。 不是因为没掌握构造/析构&#xff0c;而是。。。。 检查了四十多分钟没检查出来。。 被自己蠢哭。 #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) { }…
阅读更多...
初探HarmonyOS路由跳转

初探HarmonyOS路由跳转

最近的鸿蒙新闻也是很大声势&#xff0c;鸿蒙的纯血版一出&#xff0c;各大互联网大厂都坐不住了&#xff0c;纷纷加入其中。这意味鸿蒙将来会取代大部分Android用户&#xff0c;这也是程序员的一篇大好前程。如今的Android开发行业已经夕阳西下了。 网上有关HarmonyOS的资料几…
阅读更多...
0基础学java-day9

0基础学java-day9

一、房屋出租系统-需求&&界面 1项目需求说明 实现基于文本界面的《房屋出租软件》。 能够实现对房屋信息的添加、修改和删除&#xff08;用数组实现&#xff09;&#xff0c;并能够打印房屋明细表 2 房屋出租系统-界面 2.1 项目界面 - 主菜单 2.2项目界面- 新增房…
阅读更多...
你真的懂人工智能吗？AI真的只是能陪你聊天而已吗？

你真的懂人工智能吗？AI真的只是能陪你聊天而已吗？

提到AI这个词语&#xff0c;相信大家并不陌生&#xff0c;尤其是前段时间爆火的chatgpt&#xff0c;让我们发现似乎AI已经渗透到我们生活的方方面面了&#xff0c;但是你确定你真的了解AI这个事物吗&#xff1f;它真的只是一个简简单单的人工智能吗&#xff1f;恐怕不止如此。那…
阅读更多...
Vue中的过滤器了解吗？过滤器的应用场景有哪些？

Vue中的过滤器了解吗？过滤器的应用场景有哪些？

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-filter过滤器 目录 一、是什么 二、如何用 定义filter 小结&#xff1a; 三、应用场景 四…
阅读更多...
【黑马程序员】——微服务全套——Nacos安装指南

【黑马程序员】——微服务全套——Nacos安装指南

1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; GitHub主页&#xff1a;GitHub - alibaba/nacos: an easy-to-use dynamic service discovery, c…
阅读更多...
递归实现全排列

递归实现全排列

思路: 对于给定的集合&#xff0c;选择一个元素作为当前位置的元素。将当前位置的元素与集合中其他位置的元素交换&#xff0c;依次产生新的排列。通过递归调用&#xff0c;将当前位置向后移动&#xff0c;继续生成新的排列。当当前位置达到集合的末尾时&#xff0c;表示生成了…
阅读更多...
sqli-labs靶场详解（less29-less31）

sqli-labs靶场详解（less29-less31）

less-29 提示有最好的防火墙 小白原因 这种题型没见过 先自己测试一下 ?id1 to use near 1 预计可以使用报错注入 和单引号有关的注入点 ?id1 and 11 成功 ?id1 and 12 失败 确实是单引号字符型注入点 ?id1;%00 id1%27;%00 获取到了%00空字符&#xff08;原因就是服务器获取…
阅读更多...
【攻防世界-misc】Encode

【攻防世界-misc】Encode

1.下载解压文件&#xff0c;打开这个内容有些疑似ROT13加密&#xff0c;利用在线工具解密&#xff1a;ROT13解码计算器 - 计算专家 得到了解密后的值 得到解码结果后&#xff0c;看到是由数字和字母组成&#xff0c;再根据题目描述为套娃&#xff0c;猜测为base编码&#xff08…
阅读更多...
WEB渗透—反序列化（八）

WEB渗透—反序列化（八）

Web渗透—反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩哔_…
阅读更多...
C语言错误处理之 “信号处理方式＜signal.h＞及signal函数等内置函数”

C语言错误处理之 “信号处理方式＜signal.h＞及signal函数等内置函数”

目录 前言 signal.h头文件 信号宏 signal函数 实例&#xff1a;在Linux环境下验证signal函数 实例&#xff1a;在Linux中演示保存signal函数的返回值 预定义的信号处理函数&#xff08;简单了解&#xff09; SIG_DFL函数 SIG_IGN函数 raise函数 实例&#xff1a;测试…
阅读更多...
初识Java 18-4 泛型

初识Java 18-4 泛型

目录 泛型存在的问题 在泛型中使用基本类型 实现参数化接口 类型转换和警告 无法实现的重载 基类会劫持接口 自限定类型 奇异递归类型 自限定 自限定提供的参数协变性 本笔记参考自&#xff1a; 《On Java 中文版》 泛型存在的问题 接下来讨论的&#xff0c;是在泛型…
阅读更多...
函数式编程：简洁与效率的完美结合

函数式编程：简洁与效率的完美结合

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
【工具】Zotero｜使用Zotero向Word中插入引用文献（2023年）

【工具】Zotero｜使用Zotero向Word中插入引用文献（2023年）

版本&#xff1a;Word 2021&#xff0c;Zotero 6.0.30 前言&#xff1a;两年前我找网上插入文献的方式&#xff0c;网上的博客提示让我去官网下个插件然后才能装&#xff0c;非常麻烦&#xff0c;导致我对Zotero都产生了阴影。最近误打误撞发现Zotero自带了Word插件&#xff0c…
阅读更多...
ffmpeg之QT开发环境搭建

ffmpeg之QT开发环境搭建

文章目录 前言ffmpegQT开发环境搭建1、新建 QT 工程2、拷贝所需的 lib 文件和头文件2、拷贝所需的 dll 动态库文件3、修改 QT 项目的主配置文件 &#xff08;.pro 文件&#xff09;4、验证测试5、解决运行时的报错 前言 之前我们进行了 FFmepg 的编译以及在 Visual Studio 中引…
阅读更多...
基于51单片机冰箱温度控制器设计

基于51单片机冰箱温度控制器设计

**单片机设计介绍&#xff0c; 基于51单片机冰箱温度控制器设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于51单片机冰箱温度控制器设计是一个非常实用的项目。以下是一个基本的介绍&#xff1a; 系统概述&#xff1a; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023