css - Base64 字符串仅适用于 Chrome

Question

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

我的 CSS 看起来像:

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

我不确定从这里到哪里去，除了只是重新设置图像的基数。我目前不能这样做。

Answer 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

<div class="icon"></div>