因为svg是替换元素，flex-shrink只对flex容器的直接子元素生效，给自身加该属性无效；必须用div wrapper包裹并对其设置flex-shrink: 0和min-width: 0，同时删除svg内联宽高、显式声明viewbox。
为什么直接给 <svg></svg> 加 flex-shrink: 0 没用
因为 <svg></svg> 是替换元素（replaced element），flex-shrink 只对 flex 容器的**直接子元素**生效，但它的缩放行为由浏览器按固有尺寸+属性组合决定。你给 <svg></svg> 自身加 flex-shrink: 0，浏览器根本忽略——它不是 flex 项收缩逻辑的受控对象。
真正该设 flex-shrink: 0 的是包裹它的容器，比如 <div class="icon-wrapper"></div>。否则 flex 计算时仍会把 <svg></svg> 当作“可压缩内容”，尤其在窄容器或嵌套 flex 中，图标常被压成细线或横向拉伸。
- 必须用 wrapper 包一层，再对 wrapper 设
flex-shrink: 0和min-width: 0 - 别在 wrapper 上写死
width或height，否则破坏响应性 - 若用
<img src="icon.svg">，同样要包 wrapper ——<img>也是替换元素，逻辑一致
viewBox 缺失或宽高属性残留导致跨浏览器缩放不一致
没有 viewBox，SVG 就不是真正可缩放的矢量图形，而是被当作位图硬渲染。哪怕写了 width: 100%，也只是拉伸像素，不是重绘路径。Chrome 可能宽容 fallback，Safari 和 IE11 则直接按内联 width/height 值解析，导致尺寸错乱、比例崩坏。
- 删掉
<svg></svg>标签上所有width和height属性（包括width="100%"、height="auto"） - 显式声明
viewBox，值必须与原始设计稿画布严格一致，如viewBox="0 0 24 24" - 内联 SVG 才能响应 CSS 控制；用
<img>引用时，viewBox必须存在于源文件根标签中 - 用 Data URL 时，确保
→ <code>%3C、>→%3E、"→%22已编码，否则背景空白无报错
align-items: center 对 SVG 无效的根本原因
SVG 默认是 inline 元素，浏览器按字体 baseline 决定其垂直位置，而 align-items: center 只作用于子元素盒模型的几何中心，不修正 baseline 偏移。结果就是图标“浮高”、文字“下沉”，尤其在小字号（12–14px）下非常明显。
- 给
<svg></svg>显式加display: inline-block（别用block，否则换行） - 删掉所有
vertical-align声明——Flex 下它无效，还掩盖真实问题 - 父容器需有明确高度参照，如
min-height: 40px，否则align-items无轴可依 - 混排文字时，统一
line-height和图标尺寸（例如都设为40px） - 检查
viewBox是否带偏移（如"10 10 24 24"），应统一为"0 0 W H"
Safari 和 IE11 的兼容性陷阱怎么绕过
iOS Safari（15.4 之前）在 flex 容器中可能忽略 max-width: 100%，导致内联 SVG 卡在原始尺寸；IE11 则完全不认 align-items: center，静默降级为 flex-start。这不是 bug，是它们更严格地执行规范字面含义。
- 对 Safari：wrapper 必须加
min-width: 0，强制参与 flex 计算；更稳方案是改用width: 100%，并确保父级有明确宽度（如flex-basis或width） - 对 IE11：父容器同时写
display: -ms-flexbox和-ms-flex-align: center；避免用gap控制间距，改用margin-inline-end: 6px -
preserveAspectRatio必须显式声明：xMidYMid meet保证等比缩放，none用于填满容器；没写则各浏览器解析不一致 - 用
background-image时，放弃contain/cover，改用精确值如background-size: 24px 24px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
