让图标稳贴input右侧需用relative父容器+absolute图标，设right和padding-right，垂直居中用top:50%+transform，交互图标用/<svg>而非background-image。
怎么让图标贴在 input 右侧不跑位
关键不是“加进去”，而是“固定住”。用 position: relative 包裹 input，再把图标设为 position: absolute，右对齐。否则图标会随输入内容撑开、换行或被 focus 框遮挡。
- 父容器必须设
position: relative，否则absolute图标会相对于 body 定位 - 图标需设
right: 8px（或类似值），不能只靠text-align: right—— 那只是文本对齐，不影响定位流 - input 要留出足够右内边距（
padding-right），否则文字会盖住图标 - 图标高度最好和 input 行高一致，否则上下偏移；推荐用
top: 50%+transform: translateY(-50%)垂直居中
用 background-image 还是用 <i> 标签放图标
两者都能实现，但行为差异明显：background-image 是装饰性静态层，<i> 是可交互 DOM 节点。
- 如果图标要响应点击（比如清空搜索词），必须用
<i>或<svg>——background-image无法绑定事件 - 用
background-image更轻量，适合纯展示；但缩放、颜色动态变更困难，得靠多张图或 CSS filter - 用
<i class="icon-search">更灵活，可配 Font Awesome 或 inline SVG，支持 :hover/:focus 状态样式 - 注意：若用字体图标，确保
font-size和line-height匹配 input 高度，否则图标错位
IE 下 absolute 图标偏移或消失的常见原因
IE11 及更早版本对 input 的盒模型解析和定位有偏差，尤其在设置了 border-radius 或 box-sizing: border-box 时。
- IE 中
input默认box-sizing: border-box，但某些重置样式会改掉它，导致padding-right计算错误，图标被遮 - 避免对
input设vertical-align: middle，IE 里它会让绝对定位图标基准线错乱 - 如果父容器用了
display: flex，IE11 对align-items和子元素absolute共存支持差，建议降级为position方案 - 测试时直接在 IE 控制台检查图标元素是否渲染、
getBoundingClientRect()返回值是否合理
移动端点击区域太小，图标点不中怎么办
图标本身尺寸常只有 16×16px，但手指点击最小安全区域是 44×44px。不能只放大图标，得扩展可点击范围。
立即学习“前端免费学习笔记（深入）”；
- 给图标外层加
padding（如padding: 8px），同时用pointer-events: none让 padding 区域不干扰图标本身 - 或者把整个图标区域设为
display: block，再用width/height显式撑开点击区 - 如果图标是
<svg>，别只调width，还要设height: auto或固定viewBox，否则拉伸变形 - 真机测试时注意 iOS Safari 的
user-scalable=no可能导致点击反馈延迟，先确认 meta viewport 设置正确
