HTML5语义标签在IE8及以下需html5shiv解析+手动设display:block；polyfill须按依赖顺序加载，禁用PHPStorm自动重排script；Modernizr检测需真实浏览器验证，且降级样式应作用于html元素。
HTML5语义标签在IE8及以下不渲染，光引入html5shiv还不够
html5shiv只是让IE6–IE9能解析 <header>、<nav> 这类标签为合法DOM节点，但默认仍按 inline 渲染，必须手动补 display: block。PHPStorm里直接把html5shiv.js拖进 lib/ 目录没用——它不会自动注入样式。
正确做法是：在 <head> 中用条件注释只对IE加载，并确保紧跟一个 <style> 块或外部CSS中包含：
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }常见错误：把html5shiv放在 </body> 前，但页面已提前渲染语义标签，导致样式未生效；或用了CDN版却没配HTTPS，IE8下被拦截。
PHPStorm中管理polyfill JS文件，别用“External Libraries”面板硬塞
PHPStorm的 File → Project Structure → Libraries 是为编译期类型检查服务的，不是运行时资源管理器。把 html5shiv.min.js 或 whatwg-fetch.js 加进这里，既不会自动插入HTML，也不会影响浏览器加载顺序。
立即学习“PHP免费学习笔记（深入）”；
实际该怎么做：
- 把polyfill脚本统一放在
js/vendor/或static/js/polyfills/这类语义明确的目录下 - 在HTML模板顶部（
<head>内）用<script>手动引用，IE条件注释写法要完整：<!--[if lt IE 9]><script src="js/vendor/html5shiv.min.js"></script><![endif]--> - 如果用构建工具（如Webpack），改用
import方式在入口JS最上方加载，PHPStorm会自动识别依赖关系并提供跳转
fetch + Promise组合失效？检查PHPStorm是否误删了polyfill执行顺序
在PHPStorm中编辑HTML时，如果启用了“Reformat Code”或“Optimize Imports”，它可能把多个 <script> 标签按字母序重排，导致 whatwg-fetch.js 在 core-js/stable/promise.js 之前加载——而fetch依赖Promise，顺序错就直接报 ReferenceError: Promise is not defined。
避免方式：
- 禁用对HTML文件的自动重排：进入
Settings → Editor → Code Style → HTML → Other → Reorder elements，取消勾选 - 把关键polyfill合并为单文件（如用
cat core-js/stable/promise.js whatwg-fetch.js > polyfills.js），再统一引入，彻底规避顺序问题 - 在JS中显式检测：
if (!window.fetch || !window.Promise) { /* 动态加载 */ }，比静态引入更可靠
Modernizr检测后动态加载polyfill，PHPStorm无法预览效果？
PHPStorm内置预览器（Open in Browser）不执行JavaScript，所以Modernizr加的 no-flexbox 类名、或动态插入的 <script> 都不会生效，你看到的永远是“现代浏览器视图”。
真要验证兼容逻辑，必须：
- 用真实浏览器打开——右键HTML文件 →
Open in Browser → Chrome（别选PHPStorm内置Preview） - 在Chrome DevTools中切换到IE11或Edge 12用户代理，再刷新，看Modernizr是否触发降级逻辑
- 若用Live Server插件，确认它没启用HTTP/2或ES模块服务——旧浏览器会因MIME类型或语法报错
最容易被忽略的一点：Modernizr生成的CSS类名是写在 <html> 标签上的，但很多团队写的降级样式却绑在 body 或具体元素上，导致检测成功但样式没应用。
