如何解决IE9中按钮Base64编码背景图不显示的问题？

我之前踩过不少IE9的兼容性坑，你的问题其实是IE9对Data URI的特定限制导致的，下面给你几个针对性的解决方案：

1. 检查Data URI的大小限制 #

IE9对Data URI有严格的32KB大小上限，如果你的Base64编码后的图片内容超过了这个阈值，IE9会直接忽略这个背景图引用。你可以先把Base64字符串复制出来计算长度，要是确实超了，要么用PNG压缩工具减小图片体积，要么换成普通的服务器图片URL引用。

2. 修正Data URI的语法格式 #

IE9对Data URI的语法要求比现代浏览器苛刻，看你给出的代码里有几个可能的问题：

• 你在Data URI末尾加了多余的分号;，正确的格式应该是data:image/png;base64,你的Base64内容，不需要末尾的分号；
• 另外，在HTML的inline style属性中，url()里的引号转义可能会让IE9混淆，你可以直接去掉引号，简化写法：

<button type="button" disabled="true" style="width: 350px; height: 220px; background-image: url(data:image/png;base64,这里替换成你的Base64内容);"></button>

3. 排查disabled属性的影响 #

虽然概率不高，但IE9中带有disabled属性的表单元素，有时候会对背景样式的渲染有特殊处理。你可以先临时去掉disabled="true"测试一下，如果背景图能正常显示了，那可以用CSS来模拟disabled的视觉效果（比如设置opacity: 0.6; cursor: not-allowed;），替代原生的disabled属性。

按照这几步排查下来，基本就能解决IE9里背景图不显示的问题了。

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