IE浏览器中外联CSS背景图片失效问题求助

问题场景 #

我有一段HTML代码引用了外部CDN的CSS文件，其中CSS通过相对路径设置了SVG背景图片：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ds1.truefitcorp.com/store-nem/6.24.0.3/resources/store/nem/css/fitrec-responsive.css">
</head>
<body>
  <div class="tfc-cfg-widget tfc-fitrec-result">
    <div class="tfc-cfg-logo"></div>
    <p>Which Size Fits Me?</p>
  </div>
</body>
</html>

外部CSS中的样式：

.tfc-cfg-widget.tfc-fitrec-result .tfc-cfg-logo {
  background-image: url(../images-snapshot/responsive/logo/bg-logo-red.svg);
}

问题是：其他现代浏览器都能正确从CSS文件的相对路径加载SVG，但IE浏览器会错误地从本地代码库路径查找该SVG，导致T形logo无法显示。

问题原因 #

IE浏览器在处理跨域加载的CSS文件中的相对路径时，存在路径解析逻辑的差异——它会将相对路径解析为相对于当前HTML文档的位置，而非CSS文件本身所在的位置。这就导致原本指向CDN上SVG资源的路径，被错误指向了本地页面的路径，最终加载失败。

可行解决方案 #

1. 使用绝对URL替换相对路径

这是最直接可靠的方法，把CSS中的相对路径替换为SVG资源的完整绝对URL，彻底避免路径解析的歧义：

.tfc-cfg-widget.tfc-fitrec-result .tfc-cfg-logo {
  background-image: url('https://ds1.truefitcorp.com/store-nem/6.24.0.3/resources/store/nem/images-snapshot/responsive/logo/bg-logo-red.svg');
}

根据CSS文件的位置，../会从css目录回退到nem目录，所以拼接后的绝对路径就是上面的地址，IE能直接从正确的CDN地址加载SVG。

2. 将SVG转为Base64编码嵌入CSS

把SVG文件的内容转为Base64编码后直接写在CSS中，完全脱离外部文件路径的依赖，所有浏览器（包括IE）都能正确识别：

.tfc-cfg-widget.tfc-fitrec-result .tfc-cfg-logo {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMjUgMTBoNTB2ODBoLTUwVjEweiIgZmlsbD0iI2ZmMDAwMCIvPjwvc3ZnPg==');
}

你可以通过在线工具将你的SVG文件转为Base64编码，替换上面示例中的编码内容即可。

3. 调整相对路径为相对于HTML文档的路径

如果无法修改CSS文件的绝对路径，你可以计算从HTML文档所在位置到SVG资源的相对路径，替换原CSS中的路径。但这种方式依赖HTML页面的固定位置，灵活性较差，不如前两种方法可靠。

内容的提问来源于stack exchange，提问作者D V Yogesh