根本原因是svg源码中存在width/height属性导致跨浏览器解析不一致；必须删除svg根元素的width/height（含百分比或auto值），仅保留与路径坐标严格匹配的viewbox，并配合width:1em;height:1em;及preserveaspectratio="xmidymid meet"确保等比缩放。
根本原因不是浏览器“渲染不同”，而是 SVG 源码结构或 CSS 控制方式在某些浏览器里被忽略或误解析——Chrome 可能宽容地协调了矛盾配置，Safari 和 IE11 则直接按规范字面执行，暴露问题。
删掉 SVG 标签里的 width 和 height 属性
这是跨浏览器尺寸不一致的头号诱因。IE11 会优先读取内联 width="24" 和 height="24"，无视 CSS；Safari 在 flex 容器中遇到这类属性时，可能保留原始尺寸但不触发等比缩放；Chrome 虽常能 fallback，但行为不可靠。
- 必须彻底删除 SVG 根元素上的
width、height（包括width="100%"、height="auto"这类值） - 只保留
viewBox，且值需与内部路径坐标范围严格一致（如所有路径都在0–24范围内，就只能写viewBox="0 0 24 24"） - 外部 SVG 文件（
<img src="icon.svg">或 CSSbackground-image）同样要检查源文件，不能含宽高属性
用 width: 1em; height: 1em; 配合 viewBox
font-size 对 <svg></svg> 元素本身无尺寸作用，只影响子元素文本；真正驱动图标响应式缩放的是 width 和 height 的 CSS 值，且必须与 viewBox 宽高比一致。
- 写
svg { width: 1em; height: 1em; }，不是font-size: 1em - 若父容器
font-size变化剧烈（如h1 { font-size: 4rem; }），图标会被撑大，此时加font-size: clamp(0.875em, 1.25vw, 1.5em);限幅（Safari 13.1+ 支持） - 避免
height: auto单独使用——Firefox 和 Safari 对它的解析逻辑不同，易导致高度塌陷或比例错乱
避免 background-size: contain/cover 用于小图标
用 background-image: url("data:image/svg+xml,...") 时，contain 或 cover 不是“智能适配”，而是强制拉伸/裁切，尤其在 Safari 中容易引发路径变形和边缘锯齿。
- 改用精确值：
background-size: 24px 24px;（或1em 1em） - 确保 Data URL 中的 SVG 已 URL 编码：
→ <code>%3C，>→%3E，"→%22，否则背景空白且无报错 - 高清屏适配优先用
image-set()，而非transform: scale(2)—— 后者只是放大像素，不提升清晰度
IE11 和 Safari 的 preserveAspectRatio 必须显式声明
IE11 和旧版 Safari 对 preserveAspectRatio 默认值处理不一致，未声明时可能采用 xMidYMid slice（裁切）而非预期的 meet（等比缩放并留白）。
- 在 SVG 根元素上加上
preserveAspectRatio="xMidYMid meet" - 不要依赖 CSS 的
object-fit—— IE11 不支持，<img>标签下也无效 - 内联 SVG 时加
display: block，消除 inline 元素的基线对齐干扰，防止 Safari 中图标“吊高”或偏移
最难调试的是那些被框架自动注入的 SVG——比如 React 组件里 dangerouslySetInnerHTML 插入的字符串，或 Web Component 封装后悄悄补回的 width/height。这种情况下，vector-effect 不仅无效，还会让你误以为问题出在描边控制上，而真正该查的是 DOM 渲染后的实际 HTML 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
