doctype前置空格或bom会直接让ie/edge进怪异模式，启用ie5盒模型；data-*属性在edgehtml中无法用dataset访问；hidden在safari15.4前不影响可访问性树；title在移动端不触发原生tooltip。
DOCTYPE前置空格或BOM会直接让IE/Edge进怪异模式
这不是“属性渲染差异”，而是整个解析引擎切换了模式。只要前面有任何字符（空格、BOM、注释），IE/Edge Legacy 就立刻启用 IE5 盒模型：width 包含 padding，float 不触发 BFC，<code>vertical-align 行为全乱。Safari 和 Chrome 虽不退化，但也会在 DevTools Console 里报 Quirks Mode 提示。
实操建议：
- 用 VS Code 右下角确认编码是
UTF-8，不是UTF-8 with BOM - 把
粘到文件最顶行，删掉所有前置内容，硬刷新（<code>Ctrl+F5） - 在 Chrome DevTools 的 Elements 面板顶部看渲染模式，显示
Standards才算过关
data-* 属性在 EdgeHTML（Edge 17–18）中无法用 dataset 访问
EdgeHTML 内核对 dataset API 支持不完整：驼峰式读取（如 el.dataset.userId）会返回 undefined，必须用连字符式写法（el.dataset["user-id"]）。更隐蔽的是，JS 动态添加的 data-* 属性不会触发 dataset 更新，也不触发相关事件。
实操建议：
- 统一用
el.getAttribute("data-user-id")替代dataset，兼容性 100% - 避免在 EdgeHTML 环境中依赖
dataset做条件判断或状态同步 - 若用 Modernizr 或自定义检测，优先检测
"dataset" in document.createElement("div")，再 fallback
全局属性 hidden 在 Safari 15.4 之前只是视觉隐藏，不影响可访问性树
hidden 是 HTML5 全局布尔属性，语义上表示“该元素不参与文档渲染和交互”。但 Safari ≤15.3 实际只做了 display: none，没移除 ARIA role、没屏蔽焦点、没从可访问性树中剔除——屏幕阅读器仍能读出，键盘仍可聚焦。Chrome/Firefox/Edge 从支持第一天起就严格遵循规范。
实操建议：
- 若需真正隐藏（尤其对残障用户），别单靠
hidden，补上aria-hidden="true"和tabindex="-1" - 用
@supports (display: contents)或 JS 检测 Safari 版本，对老 Safari 加额外清理逻辑 - 测试时打开 VoiceOver 或 NVDA，验证是否真“不可见、不可达、不可读”
title 属性在移动端浏览器中基本不触发原生 tooltip
桌面端 Chrome/Firefox/Safari 鼠标悬停会显示 title 文本，但 iOS Safari、Android Chrome、Firefox for Android 全部禁用该行为——既不响应 hover，也不提供长按弹出机制。这是明确的设计选择，非 bug。
实操建议：
- 不要把关键提示信息（如表单错误说明、操作含义）只放在
title里 - 用
aria-label或aria-describedby替代，确保无障碍可用 - 需要视觉提示时，用 CSS +
::after或 JS 创建轻量 tooltip 组件，控制显隐逻辑
最容易被忽略的其实是 hidden 和 title 这类“看起来无害”的全局属性——它们不像 Flexbox 那样报错或明显错位，而是在特定场景下悄悄失效，且难以复现和定位。调试时别只盯着布局，得切到可访问性面板、模拟触摸、关掉鼠标指针再试一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
