close图标点击区域小是因为浏览器将×渲染为窄内联元素，font-size小、line-height紧、无留白，热区常不足12×12px；正确解法是用inline-flex容器固定宽高（如24px）、居中图标、禁用padding依赖字体，再加touch-action: manipulation适配移动端。
为什么close图标点击区域小得离谱
浏览器默认把 × 或 ✖ 这类字符渲染成极窄的内联元素，font-size 小、line-height 紧、周围没留白，实际可点击热区常不足 12×12px。用户必须精准点中叉号中心，稍偏就失效——这不是交互问题，是 CSS 盒模型没被主动控制。
用 padding + display: inline-flex 扩展热区
别只给图标加 padding，那会撑乱行高或引发换行。正确做法是把关闭按钮整体包装为一个独立可交互单元：
<button type="button" class="notification-close">×</button>
CSS 关键三步：
• 把 .notification-close 设为 display: inline-flex（不是 block，避免破坏行内布局）
• 显式设置 width 和 height（比如 24px），再用 align-items: center + justify-content: center 居中图标
• 加 padding: 0 防止字体自身边距干扰，所有留白由宽高和背景色承担
这样热区就是干净的正方形，且不依赖字体渲染差异。
立即学习“前端免费学习笔记（深入）”；
图标本身用 font-size 控制视觉大小，别靠缩放
常见错误是用 transform: scale(1.5) 放大 × 号——这会让点击坐标错位，尤其在高 DPI 屏幕或缩放页面时更明显。正确方式：
• 保持图标父容器（即 button）尺寸固定
• 用 font-size 调整 × 号视觉大小（如 16px），它会自然居中在 24×24 容器里
• 若需更细控制，加 line-height: 1 消除文字基线偏移
示例：
.notification-close {<br> display: inline-flex;<br> width: 24px;<br> height: 24px;<br> font-size: 16px;<br> line-height: 1;<br> align-items: center;<br> justify-content: center;<br> background: transparent;<br> border: none;<br> cursor: pointer;<br>}
移动端要额外加 touch-action: manipulation
iOS Safari 和部分安卓浏览器对小尺寸点击区域有延迟或拦截，即使你设了 24×24px，仍可能触发 300ms 延迟或误判为滑动。必须加：
• touch-action: manipulation 到关闭按钮上
• 确保父级没有 touch-action: none 覆盖
• 避免在该按钮上监听 touchstart 后再调 preventDefault()，否则会禁用原生点击响应
这个属性告诉浏览器：“这是个纯操作控件，请直接响应，别等手势判定”。
真正麻烦的不是怎么扩，而是扩完后忘了 touch 适配，或者用 transform/zoom 这类视觉欺骗手段掩盖盒模型缺陷——热区必须由真实尺寸定义，不是看起来大就行。
