各浏览器HTML默认样式、语义标签兼容性、容错解析、contenteditable行为及script执行存在差异，导致DOM结构、CSS渲染、JS行为和无障碍支持不一致。
HTML 标签在 Chrome、Firefox、Safari 和 Edge 中的默认样式差异
HTML 元素本身没有“统一外观”，浏览器会为每个标签内置一套默认样式（user agent stylesheet），而各浏览器实现并不一致。比如 在 Safari 中默认带圆角和阴影，Chrome 可能更扁平； 在 Firefox 不显示上下微调箭头，Edge 却显示。
常见表现不一致的元素包括： 下拉箭头位置与颜色、
的高度与边框样式、 的 resize 行为、
/
的折叠图标。
- 不要依赖浏览器默认的
font-family或line-height值，尤其在表单控件中 - 用
appearance: none重置后再自定义，但注意 Safari 需要-webkit-appearance: none - 对
和，显式设置border、background、padding，避免被不同 UA 样式干扰
HTML5 新增语义标签的兼容性与渲染 fallback 行为
、
、 等标签在 IE9 及更早版本中不被识别为块级元素——它们默认是 display: inline，导致布局塌陷。IE10+ 和所有现代浏览器均支持语义标签并正确设为 display: block（或对应语义 display 值，如 是 display: dialog）。
但要注意：即使标签被识别，其 ARIA 角色和可访问性行为仍有差异。例如 在 Firefox 中需配合 showModal() 才触发模态遮罩，在 Safari 15.4+ 才支持，旧版 Safari 完全忽略。
立即学习“前端免费学习笔记（深入）”；
