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