解决浏览器重置样式的HTML代码技巧-html教程-PHP中文网

直接写 { margin: 0; padding: 0; } 很危险，因会重置伪元素、降低性能、抹平表单默认行为；box-sizing: border-box 必须扩展至 ::before, *::after；html5 语义标签需显式设 display: block；表单重置要分层保留可访问性。

解决浏览器重置样式的html代码技巧

为什么直接写 `* { margin: 0; padding: 0; }` 很危险

它确实能快速“清零”，但副作用明显：所有伪元素（::before、::after）也被强制重置，而很多 UI 组件（比如 tooltip、badge）依赖这些伪元素渲染内容；通配符选择器性能开销大，尤其在 DOM 深度大的页面里，浏览器必须为每个节点做匹配计算；更关键的是，它把 fieldset、textarea、button 等需要保留部分默认行为的元素一并抹平，反而增加后续修复成本。

`box-sizing: border-box` 必须加到 `::before` 和 `::after`

只写 * { box-sizing: border-box; } 不够——伪元素默认是 content-box，一旦你用它们模拟边框或阴影，尺寸就会意外溢出。正确写法是：

*, *::before, *::after {
  box-sizing: border-box;
}

这个组合覆盖了所有真实元素和伪元素，且不会影响可访问性（比如 focus outline 的计算逻辑）。漏掉 *::before 或 *::after 是线上项目里最常被忽略的兼容性坑。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

HTML5 语义标签必须显式声明 `display: block`

哪怕用了 normalize.css，旧版 Safari 或某些 Electron 内核仍可能把 article、section、nav 当作 inline 元素处理，导致浮动失效或文字塌陷。不能依赖 DOCTYPE 声明自动生效。

必须手动加这一段（放在 reset 规则最前）：

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

不要省略 hgroup 和 summary，它们在 Safari 14–15 中仍有 display 异常
如果项目要支持 IE11，还得额外加 menu { display: block; }

表单控件重置要分两层处理

单纯写 input, button { margin: 0; padding: 0; } 会破坏原生 focus 可访问性，且不同浏览器对 type="number" 的 spin button 处理差异极大。

基础层（保留可访问性）：

input, select, textarea, button {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1.15;
  color: inherit;
  background-color: transparent;
}

增强层（按需覆盖）：针对 input[type="number"]、input[type="search"] 单独加 appearance: none;，再手动补上 border 和 padding
永远不重置 :focus，而是用 outline: none + box-shadow 替代，否则键盘用户无法导航

实际项目里最容易被跳过的，是伪元素的 box-sizing 和 HTML5 标签的 display 声明——它们不出错时毫无存在感，一出错就是整块布局偏移或交互失灵，而且很难定位。