你的后台看着挺美，一用IE浏览器打开就乱码或者按钮失灵？别急着重写代码，这篇干货直接告诉你怎么快速修复，让那些还在用IE的老客户也能正常访问。
做技术这行久了，你会发现最让人头大的不是高并发，而是那些死活不肯升级浏览器的用户。
尤其是B端业务或者传统行业，很多客户电脑里装的还是Win7甚至XP，浏览器默认就是IE8、IE9甚至更老的版本。
这时候你拿着最新的HTML5、CSS3去搞前端，结果就是页面直接崩盘。
我上周刚帮一个做工业设备管理的客户解决这个问题，他们的后台系统因为样式错乱，导致业务员没法录入数据，急得团团转。
客户问我是不是代码写错了，我打开IE一看，好家伙，连Flex布局都不支持，全是老掉牙的浮动布局逻辑。
其实，解决自己做的网站与ie不兼容 这个问题，核心不在于你有多牛的技术，而在于你懂不懂“降级兼容”的思路。
很多开发者有个误区，觉得IE就是垃圾，直接放弃治疗。
但这不现实，只要还有客户在用，你就得想办法兜底。
第一步，也是最简单的一步，加Meta标签。
在你的HTML头部加上 。
这行代码能让IE浏览器尽量使用它支持的最高版本内核来渲染页面。
虽然不能解决所有问题，但能解决50%的样式错位。
别小看这一步，很多新手连这个都忘了加，导致IE7直接以兼容模式运行，那页面简直没法看。
第二步，检查CSS兼容性。
IE对CSS3的支持非常有限，比如圆角、阴影、渐变，老版本IE根本看不懂。
你可以用PostCSS或者Autoprefixer这样的工具，自动给CSS加上前缀。
比如写border-radius的时候，工具会自动生成-webkit-border-radius和-ms-border-radius。
这样不同浏览器都能识别。
还有，别用太新的选择器，比如nth-child，IE8以下完全不支持。
如果必须用，得写一堆hack代码，或者干脆用JS模拟。
这时候，你会深刻体会到自己做的网站与ie不兼容 的痛点，往往是因为前端太追求新特性，忽略了基础兼容性。
第三步，JS层面的妥协。
ES6的语法在老IE里全是报错。
箭头函数、let/const、Promise，这些在IE里都是语法错误。
解决办法就是用Babel把代码转译成ES5。
配置好.babelrc文件，打包的时候自动转换。
这样你的代码既保持了现代写法，又能跑在老浏览器上。
我那个工业客户的案例，最后就是加了Babel转译，再配合一些CSS Hack，才把页面修好。
整个过程没超过两天，比重写系统快多了。
当然，如果IE版本实在太老，比如IE6、IE7，真的建议直接弹窗提示升级。
现在微软都停止支持IE了，客户没理由不换浏览器。
你可以在页头加个醒目的提示：“您正在使用过时的浏览器，部分功能可能无法正常使用，建议升级Chrome或Edge”。
这比强行兼容要省事得多，也能倒逼客户升级环境。
记住，兼容不是目的，体验才是。
如果为了兼容IE，导致代码臃肿不堪，维护成本极高，那不如优雅降级。
保留核心功能，牺牲一些花哨的动画和特效。
毕竟，能让用户把数据录进去，比页面有多漂亮重要得多。
最后总结一下，解决自己做的网站与ie不兼容 并不难。
加Meta标签、用工具转译CSS、用Babel转译JS，这三步走下来，90%的问题都能解决。
剩下的10%，要么是客户电脑太老，要么是你代码写得太野。
别抱怨，技术人的价值就在于解决这些看似不可能的麻烦。
下次再遇到IE报错，别慌，按这个思路排查，肯定能搞定。
