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

一、认识浏览器

四大内核： 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去除之后才能转为时间戳’

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

如何通过低代码工具，提升运输行业的运营效率和服务质量

如何通过低代码工具，提升运输行业的运营效率和服务质量

《中国数字货运发展报告》显示&#xff0c;2022年我国公路货运市场规模在5万亿元左右。其中&#xff0c;数字货运整体市场规模约为7000亿元&#xff0c;市场渗透率约为15%。而以小微企业为主的货运行业&#xff0c;却以小、散、乱的行业特征&#xff0c;承载着5万亿元左右的市场…
阅读更多...
SEAM-STRESS

SEAM-STRESS

模型 PCM means ‘Pixel Correlation Module’ 辅助信息 作者未提供代码
阅读更多...
【matlab程序】matlab使用箭头在图像上标注

【matlab程序】matlab使用箭头在图像上标注

【matlab程序】matlab使用箭头在图像上标注 clear;clc;close all;x0:1/10000:2*pi; ysin(x); figure plot(x,y,LineWidth,2) x_begin 1; x_end 2; y_begin 0; y_end 0.2;annotation(arrow,XY2Norm(X,[x_begin,x_end]),XY2Norm(Y,[y_begin,y_end]),LineWidth,2,Color,r); …
阅读更多...
静态住宅IP代理实际应用：它的强大用途你知道吗？

静态住宅IP代理实际应用：它的强大用途你知道吗？

静态住宅IP代理与动态IP代理相比&#xff0c;提供了更稳定的网络身份&#xff0c;使得企业在进行数据采集、区域定位营销和市场研究时更为高效。同时&#xff0c;它也是提高在线隐私保护和避免封禁的有效工具。 通过详细分析&#xff0c;你将能全面了解静态住宅IP代理的应用&a…
阅读更多...
【Python+Appium】自动化测试框架

【Python+Appium】自动化测试框架

appium简介 Appium 是一个开源的、跨平台的测试框架&#xff0c;可以用来测试 Native App、混合应用、移动 Web 应用&#xff08;H5 应用&#xff09;等&#xff0c;也是当下互联网企业实现移动自动化测试的重要工具。Appium、Appium-desktop、Appium Client 的区别是 Appium …
阅读更多...
同旺科技 USB 转 RS-485 适配器 -- 隔离型（定制款）

同旺科技 USB 转 RS-485 适配器 -- 隔离型（定制款）

内附链接 1、USB 转 RS-485 适配器 隔离版主要特性有&#xff1a; ● 支持USB 2.0/3.0接口&#xff0c;并兼容USB 1.1接口&#xff1b; ● 支持USB总线供电&#xff1b; ● 支持Windows系统驱动&#xff0c;包含WIN10 / WIN11 系统32 / 64位&#xff1b; ● 支持Windows …
阅读更多...
JSON详细教程

JSON详细教程

&#x1f60a;JSON详细教程 &#x1f6a9;JSON简介☃️JSON语法规则&#x1f50a;JSON和JavaScript对象的区别 ☃️JSON数据类型字符串&#x1f50a;数字&#x1f50a;布尔值&#x1f50a;数组&#x1f50a;对象&#x1f50a;Null ☃️JSON对象&#x1f50a;访问JSON对象的值&a…
阅读更多...
k8s部署jenkins

k8s部署jenkins

1.先决条件 1.因为国内的容器镜像加速器无法实时更新docker hub上的镜像资源.所以可以自己进行jenkins的容器镜像创建,. 2.这里用到了storageClass k8s的动态制备.详情参考: k8s-StoargClass的使用-基于nfs-CSDN博客 3.安装docker服务.(用于构建docker image) 2.构建jenki…
阅读更多...
案例-某乎参数x-zse-96逆向补环境

案例-某乎参数x-zse-96逆向补环境

文章目录 前言一、流程分析二、导出代码三、补环境总结 前言 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则…
阅读更多...
Django回顾【二】

Django回顾【二】

一、Web框架 Web框架&#xff08;Web framework&#xff09;是一种开发框架&#xff0c;用来支持动态网站、网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式&#xff0c;也为web行为提供了一套通用的方法。web框架已经实现了很多功能&#xff0c;…
阅读更多...
C语言——有一个3*4的矩阵，要求求出其中值最大的那个元素的值，以及其所在的行号和列号

C语言——有一个3*4的矩阵，要求求出其中值最大的那个元素的值，以及其所在的行号和列号

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int i,j,row0,colum0,a[3][4]{{1,2,3,4},{9,8,7,6},{-10,10,-5,2}};int maxa[0][0];for ( i 0; i < 3; i)//行&#xff08;row&#xff09;{for ( j 0; j < 4; j)//列&#xff08;colum&#xf…
阅读更多...
API接口测试工具的主要作用及选择指南

API接口测试工具的主要作用及选择指南

API接口测试是现代软件开发中至关重要的一环。为了确保不同组件之间的无缝集成和功能正常运作&#xff0c;API接口测试工具应运而生。本文将介绍API接口测试工具的主要作用&#xff0c;以及在选择适合项目的工具时需要考虑的因素。 1、功能测试&#xff1a;API接口测试工具的首…
阅读更多...
深入理解 SQL UNION 运算符及其应用场景

深入理解 SQL UNION 运算符及其应用场景

SQL UNION运算符 SQL UNION运算符用于组合两个或多个SELECT语句的结果集。 每个UNION中的SELECT语句必须具有相同数量的列。列的数据类型也必须相似。每个SELECT语句中的列也必须按照相同的顺序排列。 UNION语法 SELECT column_name(s) FROM table1 UNION SELECT column_na…
阅读更多...
你真的懂人工智能吗？AI真的只是能陪你聊天而已吗？

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

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

Python解释器下载和安装

什么是python解释器 一款用于执行python代码的应用程序 如何下载python解释器 下载网址&#xff1a;Download Python | Python.org 安装步骤&#xff1a; 双击下载下来的安装包测试
阅读更多...
【2023传智杯】第六届传智杯程序设计挑战赛AB组-DEF题解题分析详解【JavaPythonC++解题笔记】

【2023传智杯】第六届传智杯程序设计挑战赛AB组-DEF题解题分析详解【JavaPythonC++解题笔记】

本文仅为【2023传智杯】第六届传智杯程序设计挑战赛-题目解题分析详解的解题个人笔记，个人解题分析记录。 本文包含：第六届传智杯程序设计挑战赛题目、解题思路分析、解题代码、解题代码详解 文章目录 一.前言更新进度记录二.比赛题目（AB俩组）D题题目-abbE题题目 -kotori和…
阅读更多...
Postgresql数据库运维统计信息

Postgresql数据库运维统计信息

如果需要使用以下运维信息&#xff0c;需要如下几步 修改postgresql.conf文件 #shared_preload_libraries # (change requires restart)shared_preload_libraries pg_stat_statements重启数据库创建扩展 CREATE EXTENSION IF NOT EXISTS pg_stat_statements;1. 统计信息…
阅读更多...
记录：Unity脚本的编写7.0

记录：Unity脚本的编写7.0

目录 连接数据库编写脚本查看效果查增删 有段时间没有更新了&#xff0c;现在有点空&#xff0c;就继续写一下unity的脚本&#xff0c;这次就来写一下关于unity连接数据库的内容 连接数据库 无论是什么语言与应用场景&#xff0c;总有一项东西是绕不开的&#xff0c;那就是数据…
阅读更多...
数据库应用：Ubuntu 20.04 安装MongoDB

数据库应用：Ubuntu 20.04 安装MongoDB

目录 一、理论 1.MongoDB 二、实验 1.Ubuntu 20.04 安装MongoDB 三、问题 1.Ubuntu Linux的apt 包管理器更新安装软件报错 2.Ubuntu20.04安装vim报错 3.Ubuntu20.04如何更换阿里源 4.Ubuntu22.04如何更换阿里源 一、理论 1.MongoDB &#xff08;1&#xff09;概念 …
阅读更多...
MagicPipe3D地下管网三维建模数据规格

MagicPipe3D地下管网三维建模数据规格

经纬管网建模系统MagicPipe3D&#xff08;www.magic3d.net&#xff09;本地离线参数化构建三维地下管网&#xff08;含管道、接头、附属物等&#xff09;模型&#xff0c;输出标准3DTiles、Obj等格式&#xff0c;支持Cesium、Unreal、Unity等引擎可视化查询。MagicPipe3D三维建…
阅读更多...
最新文章

Copyright @ 2022~2023