为带target="_blank"的外部链接添加图标——Safari兼容问题

你遇到的问题是Safari对CSS mask属性结合SVG data URL的兼容性问题，以下是两种可行的解决方案：

方案一：修复mask属性兼容问题 #

调整原CSS，移除干扰属性并补充Safari需要的兼容设置：

.external-link a[target="_blank"] {
  display: inline-flex;
  align-items: center;
}

.external-link a[target="_blank"]::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.2em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23000' d='M7 3v2H2v11h11v-5h2v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6Zm11-3v8h-2V3.413l-7.793 7.794-1.414-1.414L14.585 2H10V0h8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23000' d='M7 3v2H2v11h11v-5h2v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6Zm11-3v8h-2V3.413l-7.793 7.794-1.414-1.414L14.585 2H10V0h8Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

关键改动： #

• 移除clip-path属性：该属性在Safari中易与mask属性冲突，导致图标无法渲染
• 添加mask-size: contain（含-webkit前缀）：强制SVG图标在容器内自适应显示，解决Safari中尺寸解析问题
• 将SVG的fill设为黑色（%23000）：明确的填充色帮助Safari稳定解析SVG形状（mask仅识别形状，最终颜色由background-color: currentColor控制）

方案二：改用background-image实现（兼容性更强） #

如果mask属性仍有兼容问题，直接用background-image加载SVG，兼容性覆盖Chrome和Safari：

.external-link a[target="_blank"] {
  display: inline-flex;
  align-items: center;
}

.external-link a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='currentColor' d='M7 3v2H2v11h11v-5h2v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6Zm11-3v8h-2V3.413l-7.793 7.794-1.414-1.414L14.585 2H10V0h8Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

这种方式不需要依赖mask属性，直接利用background的SVG渲染，currentColor也能正常继承链接文字颜色，兼容性更可靠。

内容的提问来源于stack exchange，提问作者user12552153