search

highso-fe / highso-fe-blog

:books: 嗨学网前端团队技术博客
15 stars 3 forks source link

嗨学网 PC 端浏览器兼容解决方案汇总 #6

Open ghost opened 7 years ago

ghost commented 7 years ago

2017-03-25 发布，最后更新于 2017-05-23

浏览器对常用特性的支持情况

HTML

1.语义化标签

New semantic elements: IE9+ 支持，包括 <section>、<article>、<aside>、<header>、<footer>、<nav>、<figure>、<figcaption>、<time>、<mark>、<main>

2.placeholder

input placeholder attribute: IE10+ 支持

CSS 特性

1.CSS3 Media Queries

IE9+ 支持，但不支持嵌套 media queries

兼容性参考

2.CSS3 selectors

IE8 支持 兄弟选择符(E~F) 和属性选择符: E[att^="val"]、E[att$="val"]、E[att*="val"]

IE8 不支持 E:root、E:nth-child(n)、E:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:last-child、E:first-of-type、E:last-of-type、E:only-child、E:only-of-type、E:empty、E:target、E:enabled、E:disabled、E:checked、E:not(s)

以上 CSS3 选择器 IE9+ 均支持，兼容性参考

3.Flexible Box Layout Module

Flex Box 布局 IE10+ 部分兼容并存在大量 Bug，兼容性参考

4.CSS3 Colors

hsl() 以及在 hsl() 和 rgba() 中的 alpha-透明度 IE9+ 支持

5.其他特性

Web API 接口

1.EventTarget.addEventListener() 等事件监听 API

对于 IE，IE9 之前必须使用 attachEvent 而不是标准的 addEventListener，使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。

兼容性参考

同样的，removeEventListener、dispatchEvent IE8 也不支持

2.DOM Event 模型

以上 API IE8 均不支持

3.Node 接口

以上 API IE9+ 支持

4.document 与 window 对象

以上 API IE9+ 支持

兼容解决方案

了解浏览器渲染内核并控制其渲染模式

嗨学 PC 端兼容标准
浏览器渲染内核
DOCTYPE 声明

DOCTYPE 会影响浏览器渲染模式（Q: 混杂模式, A: 近标准模式, S: 标准模式），应设置成 <!DOCTYPE html>，确保 IE8+ / Opera9+ / Firefox10+ / Chrome10+ / Safari10+ 为标准模式，另外此时 IE6、IE7 会解析为近标准模式

渲染内核控制

使用 meta 标签来强制 IE8 使用最新的内核渲染页面，避免 IE8 使用“兼容性视图”功能:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

引导360浏览器（双核）使用 webkit 内核渲染网页:

    <meta name="renderer" content="webkit">

支持常用特性

background-size

该属性用来设置背景图片大小，语法:

    background-size：<bg-size> [ , <bg-size> ]*
    <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

尽管 IE8 不支持该属性，我们还是可以通过非标准的 -ms-filter 函数模仿该功能:

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

该代码用来模仿 cover 效果

另外，如果用渐变作为背景并且对它使用了 background-size ，最好不要只用一个auto， 或者只指定一个宽度值 (例如 background-size: 50%)。对这两种情况 Firefox 8有所改变， 并且目前各浏览器表现不一致。应将 background-size 的宽度值和高度值写全，eg:

    width: 50px; height: 100px;
    background-image: gradient(...);
    background-size: 25px 50px; /* 推荐 */
    background-size: 50% 50%; /* 推荐 */
FlexBox 布局

IE 几乎不支持 FlexBox 布局，但我们可以在一些很适合 Flex 布局的场景下，使用 display: inline-block / display: table / display: inline 来实现部分兼容。

hsl() 和 rgba() 中的透明度

IE8 不支持 hsl() 和 rgba() 中的透明度设置，我们可以用带透明度的 png 图片来兼容 IE8

Hack

HTML Hack

IE 浏览器专有的 Hack 方式:

Eg:

    <!--[if IE]>
        IE 浏览器生效
    <![endif]-->

    <!--[if IE 8]>
        仅在 IE8 下生效
    <![endif]-->

    <!--[if gte IE 8]>
        在大于等于 IE8 版本的浏览器下生效
    <![endif]-->

    <!--[if !IE 10]>
        非 IE10 的浏览器下生效
    <![endif]-->
CSS Hack

CSS Hack 方式会大大降低代码的可维护性，请尽量避免使用

JS 判断 IE 各版本方案

详见 JavaScript判断IE各版本最完美解决方案#12

客户端检测技术

  • 能力检测：能力检测的目标不是识别特定浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
  • 怪癖检测：与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷（“怪癖”也就是 bug）。这通常需要运行一小段代码，以确定某一特性不能正常工作。
  • 用户代理检测：用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次 HTTP 请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过 JavaScript 的 navigator.userAgent 属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常见而且广为接受的做法。而在客户端，用户代理检测一般被当作一种万不得已才用的做法，其优先级排在能力检测和（或）怪癖检测之后。

检测 Web 客户端的手段很多，且各有利弊。但重要的还是要知道，不到万不得已，就不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。一言以蔽之，先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。

-- 具体请参见 《JavaScript 高级程序设计（第3版）》 的第9章：客户端检测

兼容库

查询线上资源

寻求社区力量

浏览器对各种 Web 标准的实现有所差异，一些不断迭代的前端库及框架存在宿主环境兼容性问题也很正常，当我们遇到无法解决的问题时，寻求社区帮助也是一个很高效的解决方式。我们一般会在以下社区中寻求帮助或寻找问题相关解决线索:

良好的兼容心态

最后，搬砖（写代码）前要有兼容意识，遇到兼容问题不要烦躁，往往心态端正了，兼容工作也就成功了一大半了。 :100: :smirk: