我所理解的浏览器兼容

我所理解的浏览器兼容

疑惑

• 同样的页面为什么在我这里打开页面布局、样式就乱掉了？？？
• 换了个浏览器怎么所有功能都没反应，或者页面直接是白的？？？
• 作为一个前端经常听见，功能怎么打不开啊？样式怎么不对的？

那么让匀重同学为你拨云见日

最近遇见的问题

• 国检请求发不出去
• supermind IE 白屏
• supermind 使用flexbox后 页面解析不一致
• 趣事-杭州人才档案网站图片不能上传

前端工作

• 页面开发（js+css+html+接口联调）
• 页面调试（解决浏览器兼容相关问题；分辨率、浏览器...）
• 其他东西，并不在今天分享内

哪些浏览器

• 主流浏览器(PC端)

chrome.png firefox.png IE.png safari.png edge.png opera.png

• 国内非主流

qq.png 360.png uc.png

猎豹、搜狗、遨游、斯巴达...

浏览器渲染页面需要什么

now

• 浏览器内核（渲染静态页面）

• javascript engine

  我觉得也正是因为js引擎的独立存在，才让现在的前端这么健壮
  Node.js、移动端native开发(react-native、weex)！！！兼容性问题

• 其他的东西，不在今天的分享内

遥远的古代

• 内核
• 其他的东西，不在今天的分享内

浏览器种类

内核

• IE -> Edge    trident->EdgeHTML
• Chrome    webkit->blink
• Safari    webkit
• Firefox    Gecko
• Opera    Presto->blink

js 引擎

• IE -> Edge    JScript（IE3.0-IE8.0） / Chakra（IE9+之后，查克拉，微软也看火影么..）
• Chrome    V8（大名鼎鼎）
• Safari    Nitro（4-）
• Firefox    SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）
• Opera    Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）

我习惯的分类（BOM对象的不同来区分）

• chrome、firefox ...
• IE、360、qq、UC

我觉得可能出现的兼容性问题分类

样式问题

• 初始化样式不一样
• 盒子模型 怪异盒子模型
• 内核对样式的解析不一致
• css不支持，或需要添加前缀 -webkit-、-moz-、-o-、-ms-

BOM问题

• API名称不一致
• 缺少API

我们是怎么解决这些问题的

样式

• 初始化样式

  body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
  body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
  a{color:#2d374b;text-decoration:none}
  a:hover{color:#cd0200;text-decoration:underline}
  em{font-style:normal}
  li{list-style:none}
  img{border:0;vertical-align:middle}
  table{border-collapse:collapse;border-spacing:0}
  p{word-wrap:break-word}
  

• css添加前缀

BOM

语法

现在浏览器大部分支持es5，部分es3<br />
chrome 支持部分es6 <br />
快 es8提案

• babel 转化

API

最终js是在浏览器里执行，如果你使用了浏览器没有提供的API <br />
js也是单线程语言，轻则报错，重则崩溃（白屏）<br />
处理这种问题就是缺什么补什么<br />
注意包的大小

• 在用之前先判断有没有

if (object.assign) {
    a.assign(b);
}else{
    ...吃柠檬
}

• API不一致时，往上加判断

//获取滚动条事件
if(document.documentElement && document.documentElement.scrollTop) { //IE
    ...
}else if(document.body.scrollTop){ //chrome
    ...
}

• 添加 babel-transfrom-runtime-plugin
• 添加 babel-polyfill（腻子）

最近遇见的问题的解决方式

• 国检请求发不出去

  import 'babel-polyfill'     
  //  有! 200K？代价？ 
  

• supermind IE 白屏

  //index.js
  require('core-js/fn/object/assign');
  require('core-js/fn/promise');
  

• supermind 使用flexbox后 页面解析不一致

  //common.css
  flex-wrap: wrap;              //强制换行  show scroll
  -webkit-wrap:wrap;
  overflow: hidden;             //hidden scroll