我所理解的浏览器兼容
疑惑
- 同样的页面为什么在我这里打开页面布局、样式就乱掉了？？？
- 换了个浏览器怎么所有功能都没反应，或者页面直接是白的？？？
- 作为一个前端经常听见，功能怎么打不开啊？样式怎么不对的？
那么让匀重同学为你拨云见日
最近遇见的问题
- 国检请求发不出去
- 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
