area标签自HTML 2.0起被所有主流浏览器原生支持，但存在坐标计算依赖原始图片尺寸、Safari及iOS WebView对target命名iframe静默失效、usemap属性大小写与#符号必须严格匹配等关键兼容性细节。
所有主流浏览器都支持 area 标签，但行为细节有差异
不是“支持或不支持”的二元问题，而是“支持到什么程度、在哪些边界场景会掉链子”。area 自 HTML 2.0 起就存在，Chrome、Firefox、Safari、Edge（包括旧版 IE11）全部原生解析，无需 polyfill。
area 的 href + target 在 Safari 和 WebView 中可能静默失效
这是最常被忽略的兼容性坑：当 target 指向命名 iframe（如 target="main"）时，Safari 15–17 及多数 iOS WebView（尤其 WKWebView 旧版本）会直接忽略该属性，链接退化为 _self 行为，且控制台不报错。
-
iframe必须已存在于 DOM 中，且name属性拼写完全一致（区分大小写），id不起作用 -
target="_blank"、target="_parent"等通用值表现稳定，可放心用 - 若需确保内容载入指定容器，应改用 JS 监听
click事件 +fetch+innerHTML更新目标<div>
coords 坐标永远按原始图片尺寸计算，缩放后极易点偏
一张 1200×800 的图用 CSS 缩放到 600×400 显示，coords="0,0,100,100" 仍匹配原始图左上角 100×100 像素区域——它在屏幕上实际只占 50×50 像素，用户点击视觉中心大概率落空。
- 不要手动换算缩放比例，误差难控；优先用响应式图像地图生成工具导出适配 viewport 的
coords - 若必须动态适配，JS 需监听
resize并按img.naturalWidth / img.offsetWidth实时重算坐标 - 现代替代方案更可靠：SVG
<path>+viewBox，或<canvas>+ 像素级命中检测
usemap 关联失败是 90% 的“area 不生效”原因
浏览器只认 usemap="#nav-map" 这种写法：# 不可省略，大小写、连字符、空格必须与 <map name="nav-map"> 完全一致。Chrome 开发者工具里右键图片 → “检查”，若无法高亮对应 <map>，基本就是这里错了。
立即学习“前端免费学习笔记（深入）”；
-
<map>推荐同时写id和name（<map id="nav-map" name="nav-map">），兼顾旧标准和 HTML5 工具链 -
<area>必须直接嵌套在<map>内部，不能被<div>、注释或<script>包裹 -
alt和href属性不可省略：缺alt触发无障碍警告，缺href则热区无跳转能力（部分旧浏览器也不触发click事件）
