ZBlog站点IE浏览器页面适配全攻略 附实操踩坑技巧与解决方案

先搞懂IE适配的核心痛点在哪

这事儿吧你别上来就瞎改代码，IE和现代浏览器的差异就像老人机和最新款智能手机的区别，人家内核老掉牙了，很多CSS3、H5的新特性压根不认。你用了flex布局？IE9以下直接给你堆成乱七八糟的麻将牌，你用了ES6箭头函数？控制台直接红一片给你看。还有ZBlog本身自带的很多免费模板，默认就没做IE兼容，这锅也不全是你写的代码的问题。

改之前先做版本范围界定，别做无用功

很多人都傻呵呵的上来就兼容IE6，纯纯吃饱了撑的，现在还在用IE6的用户基本属于网都上不利索的，根本不可能逛你的站。一般来说定到兼容IE9及以上就足够了，实在有特殊政企用户需求最多到IE8，再往下真的没必要花那个精力。你先在后台加个低版本判断，低于这个版本的直接弹个提示让用户升级浏览器，省好多事。

一定要先在ZBlog主题的header.php里加IE兼容元标签，就这一行代码，能解决至少30%的莫名其妙的兼容问题，很多人就是漏加了这个，平白无故多改好几天代码。

``` ```

ZBlog适配IE的核心实操技巧

CSS样式适配这块怎么搞

别用太新的CSS属性，什么grid、gap、filter这些，IE要么不认要么显示有问题，布局尽量用浮动或者inline-block代替flex，实在要用flex就加前缀，或者找个postcss-autoprefixer自动补前缀，ZBlog主题的CSS文件你统一处理一遍就行。还有ZBlog自带的分页、评论框这些公共模块，很多默认用了圆角、阴影，IE9以下不认，你要么单独写个IE的降级样式，要么就干脆给IE用户去掉这些效果，不影响功能就行。

记得给IE单独写专属样式的条件注释，这样你写的IE专属样式只会在对应版本的IE里加载，不会影响主流浏览器的显示，改起来也方便，不会动到原来的正常代码。

``` ```

JS脚本适配要注意啥

你有没有发现自己写的交互效果在Chrome里好好的，IE里点了没反应？大概率是你用了ES6的新语法，什么let、const、箭头函数、模板字符串，IE全不认。你要么自己写的时候全用ES5的语法，要么就引入babel-polyfill转译，直接在header里加一行引入就行。

``` ```

还有ZBlog自带的jQuery版本，如果你用的是最新的3.x版本，IE8及以下是不认的，要是需要兼容IE8就换成jQuery1.x的版本，直接在主题的header里替换掉原来的jQuery引入地址就行，改动很小效果很明显。

测适配的时候别瞎忙活，用对工具省一半时间

你别真找个老电脑装IE一个个测，现在有好多在线IE测试工具，比如IEtester、BrowserStack，直接选对应版本就能看效果，还有IE浏览器自带的F12调试器，里面可以切换文档模式，直接模拟不同版本的IE显示效果，哪块错了直接改就行。哦对了改完一定要清缓存，IE的缓存机制死顽固，你改了代码半天不生效，大概率是缓存没清，别傻乎乎的以为自己改的不对，折腾半天白费劲。

其实IE适配这事儿没你想的那么难，毕竟现在用IE的用户占比已经很低了，你只要把核心功能跑通，样式不崩就行，没必要追求和现代浏览器一模一样的效果，毕竟老浏览器的性能摆在那，能正常看内容、发评论、提交表单就足够了，花太多精力在上面反而不值当。