ie11对html5语义标签支持不足，需引入html5shiv并手动设置display:block；替换为后需调整居中css；清除浮动需扩展选择器；自闭合标签严禁闭合；dom结构必须合法才能确保补丁生效。

IE11 无法识别 <header></header> 等标签导致布局塌陷

IE11 不把 <header></header>、<nav></nav>、<main></main> 当作块级元素，而是当成未知内联标签处理，结果就是它们不占行高、不响应 width、margin 失效，整个导航栏或页脚直接堆在顶部。

• 必须加 html5shiv（仅解决标签识别，不解决样式）
• 紧接着手动声明：header, nav, section, article, aside, footer { display: block; }
• 别只靠 html5shiv.js 就停手——它只让 IE11 “知道”这些标签存在，不注入任何 CSS
• 如果用了构建工具（如 Webpack），确保 html5shiv 在 最前加载，且早于所有 CSS

<main></main> 替换 <div class="content"> 后垂直居中失效 <p><code><main></main> 是普通块级元素，没有内置居中逻辑。你原来靠 display: table-cell; vertical-align: middle 实现的居中，换成 <main></main> 后没同步改 CSS，自然就“掉下来”了。

• 单行文字居中：给 <main></main> 加 line-height: 100vh（仅限固定高度容器）
• 内容块整体居中：外层容器设 display: flex; justify-content: center; align-items: center，<main></main> 保持默认 display: block
• 避免用 position: absolute + transform 模拟居中——IE11 对 transform 支持有限，且易受父容器 overflow 影响

浮动清除在语义化标签中突然失效

旧项目常用 <div class="clearfix"> 清除浮动，但换成 <code><section></section> 或 <aside></aside> 后，如果 CSS 里清除规则只绑定了 .clearfix::after，那新标签根本不会触发清除逻辑。

• 推荐方案：父容器直接设 display: flow-root（IE11 不支持，需降级）
• 兼容写法：对语义标签也加 class="clearfix"，或统一重写清除规则为 section::after, aside::after, .clearfix::after { ... }
• 慎用 overflow: hidden 清除浮动——IE11 下可能意外裁剪 position: absolute 子元素
• 更彻底的解法：用 display: flex 替代浮动，IE11 支持基础 flex 布局（但不支持 flex-wrap: wrap）

自闭合标签多写 引发 DOM 整体右移

在 IE11 及更老浏览器中，<img src="x"> 这类写法会被解析成两个标签：<img> 被忽略， 被当作新开的普通容器，后续所有嵌套层级整体偏移一级——页脚被塞进导航栏、表单提交按钮消失，都是这个原因。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• HTML5 中 <img>、<input>、<br> 等是 void 元素，**禁止闭合**
• 正确写法只有：<img src="x">（/> 可省略，不推荐加）
• W3C Validator 会报 Element img is not closed，这类警告不能跳过
• 模板引擎（如 EJS）拼接 HTML 时，务必检查循环分支是否漏闭合，尤其 <p></p> 和 <li> 容易被提前截断

真正麻烦的不是补丁本身，而是补丁生效的前提：DOM 结构必须先合法。如果源码里还混着 <p></p> <div></div> 这类嵌套错误，哪怕加了 html5shiv 和 display: block，IE11 依然会按自己的规则纠错，最终布局还是不可控。