Base64 字符串仅适用于 Chrome答案

【问题标题】：Base64 string only works in ChromeBase64 字符串仅适用于 Chrome
【发布时间】：2015-10-15 23:37:10
【问题描述】：

我有一个 base64 svg 字符串，它不能在 FF 或 Safari 中工作，但在 Chrome 中工作得很好。（最新版本）我在 FF 中收到的错误是：

我的 CSS 看起来像：

.icon.icon-play {
    background-image: url("data:image/svg+xml;\a base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgMTAxIDEyOCI+CjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik05OC44NTcgNjYuMjE0bC05NC44NTcgNTIuNzE0cS0xLjY0MyAwLjkyOS0yLjgyMSAwLjIxNHQtMS4xNzktMi41NzF2LTEwNS4xNDNxMC0xLjg1NyAxLjE3OS0yLjU3MXQyLjgyMSAwLjIxNGw5NC44NTcgNTIuNzE0cTEuNjQzIDAuOTI5IDEuNjQzIDIuMjE0dC0xLjY0MyAyLjIxNHoiPjwvcGF0aD4KPC9zdmc+Cg==");
}

我不确定从这里去哪里，除了只是重新定位图像。目前我做不到。

【问题讨论】：

标签： css google-chrome firefox svg base64

【解决方案1】：

在 Firefox 上对我来说很好（即使我留在无关的 \a 中）。虽然没有...

.icon {
    background-color: black;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgMTAxIDEyOCI+CjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik05OC44NTcgNjYuMjE0bC05NC44NTcgNTIuNzE0cS0xLjY0MyAwLjkyOS0yLjgyMSAwLjIxNHQtMS4xNzktMi41NzF2LTEwNS4xNDNxMC0xLjg1NyAxLjE3OS0yLjU3MXQyLjgyMSAwLjIxNGw5NC44NTcgNTIuNzE0cTEuNjQzIDAuOTI5IDEuNjQzIDIuMjE0dC0xLjY0MyAyLjIxNHoiPjwvcGF0aD4KPC9zdmc+Cg==");
  width: 101px;
  height: 128px;
}

You seem to have some extraneous %20 characters and a \a character. %20

&lt;div class="icon"&gt;&lt;/div&gt;

【讨论】：