坐高铁查12306,单位内网订车票,老同事用Win7+IE11打开页面直接白屏——别急,不是代码写错了,是框架没选对。
为啥IE还活着?
不少政务系统、铁路调度后台、银行内部OA,至今仍要求IE8/9/11支持。不是不想升级,是老旧插件、ActiveX控件、本地打印功能绑得太死,一换浏览器就罢工。
真能跑在IE里的框架,其实不多
Vue 3、React 18 默认不兼容IE,连Babel转义都救不了。但有些老将还在扛着:比如 jQuery UI 配合 Bootstrap 3,至今在很多交通调度大屏上稳稳运行;Ext JS 6.5 也明确支持IE11,某省高速公路监控平台就靠它撑了五年。
动手试试最省事的方案
如果只是做个简易出行查询页(比如查机场大巴时刻、地铁末班车),用 Bootstrap 3.4.1 + jQuery 3.6.0 组合最省心:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>城际巴士查询</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>出发地</h2>
<input type="text" class="form-control" id="from" placeholder="输入城市名">
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</body>
</html>关键就两行:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 强制启用最高IE模式;引用的JS/CSS版本都经过IE11实测,不用额外配polyfill。
别踩这些坑
ES6语法(箭头函数、let/const)、fetch、Promise、flex布局——IE里全歇菜。哪怕你用Webpack打包,也得手动加 core-js/stable 和 regenerator-runtime,不然“对象不支持此属性或方法”弹窗准来报到。
某市公交APP后台曾用Vue 2.7试水,结果IE11点筛选按钮直接卡死。后来切回jQuery+Handlebars,反而加载更快,连老式触摸屏一体机都响应如初。
兼容IE不是守旧,是让信息真正触达每一双需要的眼睛——尤其当司机师傅在调度室用着十年前的电脑,敲下“发车”两个字的时候。