各浏览器HTML默认样式、语义标签兼容性、容错解析、contenteditable行为及script执行存在差异，导致DOM结构、CSS渲染、JS行为和无障碍支持不一致。
HTML 标签在 Chrome、Firefox、Safari 和 Edge 中的默认样式差异
HTML 元素本身没有“统一外观”，浏览器会为每个标签内置一套默认样式（user agent stylesheet），而各浏览器实现并不一致。比如 <button> 在 Safari 中默认带圆角和阴影，Chrome 可能更扁平；<input type="number"> 在 Firefox 不显示上下微调箭头，Edge 却显示。
常见表现不一致的元素包括：<select> 下拉箭头位置与颜色、<hr> 的高度与边框样式、<textarea> 的 resize 行为、<details>/<summary> 的折叠图标。
- 不要依赖浏览器默认的
font-family或line-height值，尤其在表单控件中 - 用
appearance: none重置后再自定义，但注意 Safari 需要-webkit-appearance: none - 对
<button>和<input>，显式设置border、background、padding，避免被不同 UA 样式干扰
HTML5 新增语义标签的兼容性与渲染 fallback 行为
<article>、<nav>、<main> 等标签在 IE9 及更早版本中不被识别为块级元素——它们默认是 display: inline，导致布局塌陷。IE10+ 和所有现代浏览器均支持语义标签并正确设为 display: block（或对应语义 display 值，如 <dialog> 是 display: dialog）。
但要注意：即使标签被识别，其 ARIA 角色和可访问性行为仍有差异。例如 <dialog> 在 Firefox 中需配合 showModal() 才触发模态遮罩，在 Safari 15.4+ 才支持，旧版 Safari 完全忽略。
立即学习“前端免费学习笔记（深入）”；
- 老项目需兼容 IE9/10 时，必须引入
document.createElement('article')类脚本，或使用 html5shiv - 不要假设
<time datetime="2023-01-01">Jan 1</time>会被所有屏幕阅读器正确解析日期格式 -
<picture>+<source>在部分 Android Webview（如 4.4）中 fallback 到<img>但忽略srcset，需确保<img>的src是可用兜底图
HTML 属性拼写错误或缺失时各浏览器的容错策略差异
HTML 是容错性极强的标记语言，但浏览器“怎么容错”并不统一。例如 <img src="a.jpg" alt="" title=missing-quote> 中未闭合的 title 属性值，Chrome 会把后续所有属性（包括 class="foo"）都吞进 title 值里；Firefox 则更早截断，可能只取到 missing-quote class="foo" 的前半段。
另一个典型是自闭合标签误写：把 <meta charset="utf-8"> 写成 <meta charset="utf-8" />。XHTML 模式下合法，但 HTML5 解析器（尤其是旧版 Edge）可能将斜杠当作属性名，生成一个叫 / 的空属性。
- 服务端模板或构建工具中拼接 HTML 时，务必用引号包裹所有属性值，避免空格或特殊字符引发解析偏移
- 检查 DOM 时别只看 Elements 面板，用
console.log(el.outerHTML)确认实际解析结果，因为 DevTools 显示的是“修正后”的树 -
contenteditable在 Safari 中对<div>的光标定位有时跳到行首，而在 Chrome 中更贴近点击位置——这不是 HTML 问题，但常被误归因于标签写法
script 标签位置与 defer/async 对 HTML 解析流程的实际影响
<script> 的放置位置和属性直接改变 HTML 解析器的行为，而各浏览器对 spec 的实现细节有微小出入。比如当页面含 <script async src="a.js"></script> 且该脚本内执行 document.write()，Chrome 和 Firefox 会清空当前文档并重写，Safari 则可能抛出 TypeError: document.write is not supported（尤其在非初始导航场景）。
更隐蔽的是 defer：规范要求它按顺序执行且不阻塞解析，但 Safari 15.0–15.2 存在 bug，若 defer 脚本在 <head> 中且文档尚未触发 DOMContentLoaded，其执行时机可能晚于预期。
- 永远避免在现代项目中用
document.write()，它在 async/defer 场景下不可控 - 多个
defer脚本的执行顺序以 HTML 中出现顺序为准，但需确保它们不相互依赖 DOM 就绪状态（DOMContentLoaded更可靠） - 用
type="module"替代defer可获得更一致的顺序保证，但注意 IE 完全不支持，需搭配nomodule降级
<input type="date"> + valueAsDate + 时区为 Asia/Shanghai 时返回 null——它不报错，只是静默失效。 
