CSS背景SVG在IE及Edge浏览器中不显示的原因咨询

这个问题我之前也碰到过，核心是IE10/11和旧版Edge对SVG data URI的解析逻辑和Chrome存在差异，具体原因有两点：

• 特殊字符未编码导致SVG被截断：你的SVG代码里用了 # 符号设置填充色（fill='#6f6f6f'），但在data URI中，# 是URL锚点的标记，IE和旧版Edge会误把 # 后面的内容当作锚点，直接截断SVG代码，导致浏览器无法完整解析这个图标。
• 旧版浏览器对纯文本SVG data URI支持有限：IE10/11和旧版Edge对未经过base64编码的SVG data URI兼容性较差，一旦SVG里有引号、特殊字符，很容易出现解析失败的情况。

修复方案 #

你可以任选以下两种方法解决：

方法一：正确编码SVG中的特殊字符 #

把SVG里的 # 替换成URL编码后的 %23，就能避免截断问题。修改后的CSS代码如下：

.search{ 
  border-radius: 4px; 
  border: 1px solid lightgrey; 
  max-width: 400px; 
  padding: 10px 10px 10px 30px; 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1' viewBox='0 0 22 22'%3E%3Cpath d='M14.92 14.07l6.04 6.04c.23.24.23.62 0 .86-.24.23-.62.23-.85 0l-6.03-6.04C12.57 16.22 10.63 17 8.5 17 3.8 17 0 13.2 0 8.5S3.8 0 8.5 0 17 3.8 17 8.5c0 2.13-.78 4.08-2.08 5.57zM8.5 16c4.14 0 7.5-3.36 7.5-7.5C16 4.36 12.64 1 8.5 1 4.36 1 1 4.36 1 8.5 1 12.64 4.36 16 8.5 16z' fill='%236f6f6f' fill-rule='nonzero'/%3E%3C/svg%3E"); 
  background-repeat: no-repeat; 
  background-position: 8px center; 
  background-size: 1.675em; 
}

方法二：将SVG转为base64编码 #

这种方法更稳妥，彻底规避字符编码冲突的问题。替换后的CSS代码如下：

.search{ 
  border-radius: 4px; 
  border: 1px solid lightgrey; 
  max-width: 400px; 
  padding: 10px 10px 10px 30px; 
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjAgMCAyMiAyMiI+PHBhdGggZD0iTEE0LjkyIDE0LjA3bDYuMDQgNi4wNGMuMjMuMjQuMjMuNjIgMCAuODYtLjI0LjIzLS42Mi4yMy0uODUgMGwtNi4wMy02LjA0QzEyLjU3IDE2LjIyIDEwLjYzIDE3IDguNSAxNyAzLjggMTcgMCAxMy4yIDAgOC41UzMuOCAwIDguNSAwIDE3IDMuOCAxNyA4LjVjMCAyLjEzLS43OCA0LjA4LTIuMDggNS41N1pNOCAuNSAxNmM0LjE0IDAgNy41LTMuMzYgNy41LTcuNUMxNiA0LjM2IDEyLjY0IDEgOC41IDEgNC4zNiAxIDEgNC4zNiAxIDguNSAxIDEyLjY0IDQuMzYgMTYgOC41IDE2eiIgZmlsbD0iIzZmNmY2ZiIgZmlsbC1ydWxlPSJub25lZXIiLz48L3N2Zz4="); 
  background-repeat: no-repeat; 
  background-position: 8px center; 
  background-size: 1.675em; 
}

两种方法都能让放大镜图标在IE10/11、旧版Edge和Chrome中正常显示。

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