Web 兼容性指南

最新推荐文章于 2024-04-08 05:40:11 发布

北冥有一鲲

最新推荐文章于 2024-04-08 05:40:11 发布

阅读量2.9k

点赞数 1

分类专栏： javascript 文章标签：移动端适配移动端兼容性 300毫秒延迟 1px边框

本文链接：https://blog.csdn.net/zhoulei1995/article/details/82846510

版权

Web 开发比较头疼的问题之一就是处理浏览器的兼容性。

以上这些原因就造成了同一份代码在不同浏览器上表现不一致，简而言之就是兼容性问题。

本文主要介绍当前一些常见的兼容性问题以及解决方案，由于博主从事移动端的网页开发，所以会重点介绍移动端的一些兼容性问题。

浏览器介绍

不过我们这里谈论浏览器的兼容性，主要谈论主流浏览器，如 IE、FireFox 以及 Chrome，因为它们分别属于不同的浏览器内核，所以以它们为例进行讨论。

有人看到这里可能要问，为什么没有 360 浏览器、QQ 浏览器或 UC 浏览器？事实是国内几乎所有浏览器都是使用的上述浏览器内核，只不过外面换了一层皮肤而已。

对于浏览器的兼容问题，一般分三个方面：

大多数我们遇到的兼容性难题是 CSS 某些属性浏览器不支持导致的，这里推荐一个网站 Can I use，可以帮我们检测某个 CSS 属性的浏览器兼容性情况。

flexbox

从网站上搜索的结果来看，IE 10 开始支持 flexbox 布局，但是需要在属性前面添加前缀 -ms-。

谈起浏览器兼容性，默认样式可以说是一个最常见的问题。

问题描述

我们可以随便写几个 HTML 标签，让后在不同的浏览器中打开，我们会发现它们的边距、边框、大小等都会有不同。

解决方法

一、简单粗暴

/* 如果要解决默认边距问题，可以采用如下方法 */

* {
   
  padding: 0;
  margin: 0;
}

这种方法有些问题，现在一般不推荐了。一方面 * 导致 CSS 渲染引擎在渲染 CSS 的时候，使用 * 遍历整个 DOM 树，影响性能渲染性能。另一方面 * 的威力太大，管你是谁，统统重置，把很多没有必要的都重置了。

二、引入 reset.css

最先作者是 Eric Meyer，目的是在各个浏览器达到统一的效果。

关注