老旧浏览器访问现代网页需兼容处理：一、启用ie兼容模式；二、注入html5 shiv支持语义化标签；三、用babel转译es6+语法并加载core-js polyfill；四、对现代api做特征检测与降级回退。
如果您使用老旧浏览器访问现代网页，可能无法正常运行依赖新HTML API的函数工具，这是因为旧版浏览器缺少对现代Web标准的支持。以下是实现兼容性的具体方法：
一、启用浏览器兼容模式
部分老旧浏览器（如IE10/11）内置兼容性视图，可模拟旧版渲染引擎行为，使页面按较老标准解析，从而避免因HTML5新标签或API缺失导致的脚本中断。
1、在IE浏览器中，点击右上角齿轮图标，选择“兼容性视图设置”。
2、在弹出窗口中，勾选“在兼容性视图中显示内联网的网站”。
3、手动添加目标网站域名至下方文本框，点击“添加”按钮。
4、关闭并重新打开该网站，确认地址栏右侧是否出现兼容性视图图标。
二、注入HTML5 Shiv脚本
HTML5 Shiv是一个JavaScript库，用于在IE8及更早版本中创建并识别HTML5语义化元素（如
1、在页面
区域顶部插入以下script标签：<script src="https://oss.maxcdn.com/<a%20style=" color: text-decoration:underline title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html5shiv/3.7.3/html5shiv.min.js"></script>
2、确保该脚本位于所有CSS引用之前，以避免样式未生效。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
3、验证DOM中是否能通过document.querySelector('header')获取到对应节点，返回非null即表示注入成功。
三、使用Babel转译现代JavaScript语法
老旧浏览器不支持ES6+语法（如箭头函数、Promise、fetch等），需将现代JS代码转译为ES5语法，再配合polyfill补全缺失的全局对象与方法。
1、在项目中安装Babel CLI及相关preset：npm install --save-dev @babel/core @babel/cli @babel/preset-env
2、创建babel.config.json文件，内容包含{"presets": ["@babel/preset-env"]}
3、执行命令npx babel src --out-dir lib，将src目录下现代JS文件输出为兼容ES5的版本。
4、在HTML中引入转译后脚本前，先加载core-js polyfill：<script src="https://cdn.jsdelivr.net/npm/core-js@3.30/bundles/core-js.min.js"></script>
四、降级调用现代HTML函数工具
针对document.querySelector、localStorage、classList等现代API，可通过特征检测加回退逻辑的方式，在不支持时启用替代方案，避免脚本直接报错中断。
1、检测querySelector是否存在：if ('querySelector' in document) { /* 使用原生方法 */ } else { /* 调用自定义getElementsByClassName封装 */ }
2、对localStorage做try-catch包装：try { localStorage.setItem('key', 'val'); } catch(e) { /* 写入cookie作为备用存储 */ }
3、判断classList支持性：if (element.classList) { element.classList.add('active'); } else { element.className += ' active' }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
