语义标签错位源于浏览器默认样式差异，需显式设置display、box-sizing等；IE11需html5shiv+display:block；布局失效因未同步更新CSS，语义化不等于免配置。
为什么
它们本身不带任何默认样式，错位不是标签的问题，而是你没重置或覆盖浏览器对这些元素的隐式 常见现象：导航栏塌陷、页脚跑出容器、文字换行异常——本质是盒模型未显式声明。 语义标签不会自动参与浮动或弹性布局计算， 实操建议： 立即学习“前端免费学习笔记（深入）”； IE11 不识别 HTML5 新增的结构标签，会把 必须做两件事： 修复方向取决于你的目标居中方式： 语义化不是免配置的借口，每个标签仍要按实际布局需求设置样式。最容易被忽略的是：你以为换了个标签就自动适配了旧 CSS 规则，其实只是掩盖了原本就存在的盒模型缺陷。display 处理。比如旧版 Chrome 会把 当成 inline 渲染，Safari 对 的 margin 处理也和
display: block（尤其 IE11 及更早版本）display: flex 或 display: grid 布局时，父容器必须明确声明，不能依赖“应该自动撑开”box-sizing，推荐全局加 * { box-sizing: border-box }
和 并排时宽度算不准width: 30% + width: 70% 在 和 上可能因默认 margin 或 padding 溢出。
display: flex 替代浮动，父容器设 display: flex，子元素用 flex: 0 0 30% 控制基准宽度float: left 和 width，并确保父容器有 overflow: hidden 或伪元素清除浮动 的额外 max-width 或 margin-left
IE11 下
跑到页面顶部怎么办 当作未知内联元素处理，导致渲染为 display: inline，不占块级空间。
中引入 html5shiv：
header, nav, section, article, aside, footer { display: block; }html5shiv 就以为万事大吉——它只解决识别问题，不注入样式用
包裹内容后垂直居中失效 是个普通流内块元素，没有内置居中逻辑。如果你之前用 display: table-cell; vertical-align: middle，换成 后没同步改 CSS，就会失效。
加 line-height 等于容器高度，或改用 display: flex; align-items: center
display: flex; justify-content: center; align-items: center， 保持默认 display: block
position: relative 在父容器上，否则 top: 50%; transform: translateY(-50%) 会相对视口计算
