需引入html5shiv.js使IE8及以下识别HTML5语义标签;在中添加CDN链接https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js,仅针对IE生效。

HTML5 标签在 IE8 及更早版本直接不识别怎么办
IE8 及以下版本不认识 、、 这类语义化标签,会当成未知元素,不渲染样式,document.getElementById 也可能取不到——不是 JS 写错了,是 DOM 根本没生成。
必须让旧 IE “知道”这些标签存在,再触发重绘:
- 在
中引入html5shiv.js(推荐用 CDN:https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js) - 只对 IE
- 别漏掉
html5shiv-printshiv.js(如果页面需打印样式),否则 IE 打印时语义标签仍失效
CSS Flexbox 在 IE10–IE11 表现不一致怎么处理
IE10–IE11 支持的是旧版 Flexbox 语法(display: -ms-flexbox),和现代标准差异大,比如 flex-wrap 不支持、align-content 行为异常、order 值解析错位。
实际写法要双轨并行:
立即学习“前端免费学习笔记(深入)”;
明星艺人网站源码(模特礼仪类网站模板)采用最新HTML5+CSS3写法,织梦UTF编码内核,程序兼容性强,前台纯静态HTML、利于SEO排名,完美兼容IE8+、Firefox、Chrome、360浏览器等主流浏览器; 1、该代码干净整洁; 2、效果相当的炫酷,相当简洁大气高端,模板简单,全部已数据调用,只需后台修改栏目名称即可 3、适用于明星艺人、模特礼仪; 4、网站手工DIV+css,代码
- 先写标准属性:
display: flex、flex-direction: row、justify-content: center - 紧跟着加 IE 兼容前缀:
display: -ms-flexbox、-ms-flex-direction: row、-ms-flex-pack: center - 用 Autoprefixer 工具自动生成(配置
browsers: ["ie >= 10"]),别手写——手写容易漏掉-ms-flex-align和-ms-flex-line-pack这两个关键映射
ES6+ JS 语法在 IE11 运行报错怎么降级
IE11 不支持 const、let、箭头函数、模板字符串、解构赋值,哪怕只是写了个 const name = "Alice",整个脚本就中断执行。
不能靠“尽量不用新语法”来凑合,得工程化处理:
- 用 Babel 编译,目标设为
ie 11(注意:Babel 7 默认不转Promise、fetch,要额外加@babel/polyfill或core-js) - 避免用
async/await——Babel 转成regeneratorRuntime后体积大、性能差;改用Promise.then更稳 - 检查打包后代码是否含
class关键字(IE11 支持class,但某些旧版 webpack 插件可能误删class的 polyfill)
图片和字体加载在 IE 中失败的常见原因
IE 对资源路径、MIME 类型、字体格式极其敏感,常出现“图片空白”或“字体 fallback 到宋体”。
几个硬性检查点:
-
的src路径不能含 URL 编码空格(如%20),IE 会直接 404;用下划线或连字符代替空格 - Web 字体必须提供
.eot(IE8–IE11 必需)和.woff(IE9+ 推荐),仅用.woff2会导致 IE 全部失效 - CSS 中
@font-face的src顺序很重要:把format("eot")放最前,IE 会跳过后续声明;不要写成url("font.woff2") format("woff2"), url("font.eot") format("eot")









