svg + xml base64 url​​編碼的firefox問題，內容：url（）;

Question

該解決方案可在Chrome上運行，但不再適用於FF和IE。

我已將svg更改為base64和url編碼，就像我在其他主題上閱讀的一樣。

在img標簽中，svg可以正常工作，但是當我在content: url();使用它時content: url(); 它不起作用。

這是小提琴

#someDiv {
    content:url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIuNiAzOTIuNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMDI0N2Q7fS5jbHMtMntmaWxsOiNmZmY7fS5jbHMtM3tmaWxsOiNjZjE0MmI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT51azJfZmxhZzwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLTI5LjcsOTguN2MwLDEwOC4zLDg4LDE5Ni41LDE5Ni4zLDE5Ni41UzM2Mi45LDIwNy4xLDM2Mi45LDk4LjdjMC0xMDQuNC04MS44LTE5MC0xODQuNS0xOTYuMUgxNTVDNTIuMS05MS4zLTI5LjctNS43LTI5LjcsOTguN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tMTEuNiwxNi4zTDExOS44LDk3LjF2LTc0TDIzLjgtMzZBMTk5LjI3LDE5OS4yNywwLDAsMC0xMS42LDE2LjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNLTYuOSw3TDExOS45LDg0LjlWNjNMMi42LTlBMTgyLjEyLDE4Mi4xMiwwLDAsMC02LjksN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tNywxOTAuM2ExOTksMTk5LDAsMCwwLDM4LjIsNTAuNWw4OC43LTU0LjV2LTc0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIzLjcsMjMzLjJsOTYuMi01OS4xVjE1Mi4zTDExLjQsMjE4LjlDMTUuMywyMjMuOSwxOS40LDIyOC42LDIzLjcsMjMzLjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzExLjItMzMuOWwtOTIuOCw1N3Y3NEwzNDUuOCwxOC44QTE5NCwxOTQsMCwwLDAsMzExLjItMzMuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zMTguMS0yNkwyMTguNCwzNS4yVjU3TDMyOS4zLTExQTE4Mi42NSwxODIuNjUsMCwwLDAsMzE4LjEtMjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzQxLjQsMTg3LjlMMjE4LjUsMTEyLjN2NzRMMzA0LDIzOC44QTE5Ni4zNSwxOTYuMzUsMCwwLDAsMzQxLjQsMTg3LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzM2LjQsMTk3bC0xMTgtNzIuNHYyMS44bDEwNy45LDY2LjNDMzI5LjksMjA3LjYsMzMzLjMsMjAyLjQsMzM2LjQsMTk3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTS0yOS43LDk4LjdBMTk3Ljc2LDE5Ny43NiwwLDAsMC0yMi45LDE1MGwzNzguOCwwLjJhMTk1LjM5LDE5NS4zOSwwLDAsMCwyLjktOTAuOGwtMzg0LjUtLjJBMTk2LjcxLDE5Ni43MSwwLDAsMC0yOS43LDk4LjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTU0LjgtOTcuNGExOTAuNjYsMTkwLjY2LDAsMCwwLTM4LjcsNi4zVjI4OC42YTE5NS4xMiwxOTUuMTIsMCwwLDAsNTAuNCw2LjYsMTk2Ljc0LDE5Ni43NCwwLDAsMCw1NS4xLTcuOXYtMzc3YTE5NC4zOCwxOTQuMzgsMCwwLDAtNDMuMy03LjZIMTU0Ljh2LTAuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMzYuMywyOTIuOGEyMDIsMjAyLDAsMCwwLDMwLjMsMi4zLDE5My44NiwxOTMuODYsMCwwLDAsMzMuNC0yLjlWLTk0LjlhMTkyLjg5LDE5Mi44OSwwLDAsMC0yMS42LTIuNUgxNTVhMTgzLjY2LDE4My42NiwwLDAsMC0xOC41LDJWMjkyLjhoLTAuMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0tMjkuNyw5OC43QTIwMy4zMiwyMDMuMzIsMCwwLDAtMjcsMTMxLjFIMzYwLjFhMTkyLjMyLDE5Mi4zMiwwLDAsMCwyLjctMzIuNCwyMDUuNDIsMjA1LjQyLDAsMCwwLTEuMy0yMi4zSC0yOC40QTIwMy45NCwyMDMuOTQsMCwwLDAtMjkuNyw5OC43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjwvc3ZnPg==');
    display: block;
    width: 259px;
    height: 243px;
}  

Answer 1

在CSS 2 Specification中，內容僅適用於：before和：after偽元素。 Firefox確實實現了這一點

 #someDiv::before { content:url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIuNiAzOTIuNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMDI0N2Q7fS5jbHMtMntmaWxsOiNmZmY7fS5jbHMtM3tmaWxsOiNjZjE0MmI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT51azJfZmxhZzwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLTI5LjcsOTguN2MwLDEwOC4zLDg4LDE5Ni41LDE5Ni4zLDE5Ni41UzM2Mi45LDIwNy4xLDM2Mi45LDk4LjdjMC0xMDQuNC04MS44LTE5MC0xODQuNS0xOTYuMUgxNTVDNTIuMS05MS4zLTI5LjctNS43LTI5LjcsOTguN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tMTEuNiwxNi4zTDExOS44LDk3LjF2LTc0TDIzLjgtMzZBMTk5LjI3LDE5OS4yNywwLDAsMC0xMS42LDE2LjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNLTYuOSw3TDExOS45LDg0LjlWNjNMMi42LTlBMTgyLjEyLDE4Mi4xMiwwLDAsMC02LjksN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tNywxOTAuM2ExOTksMTk5LDAsMCwwLDM4LjIsNTAuNWw4OC43LTU0LjV2LTc0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIzLjcsMjMzLjJsOTYuMi01OS4xVjE1Mi4zTDExLjQsMjE4LjlDMTUuMywyMjMuOSwxOS40LDIyOC42LDIzLjcsMjMzLjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzExLjItMzMuOWwtOTIuOCw1N3Y3NEwzNDUuOCwxOC44QTE5NCwxOTQsMCwwLDAsMzExLjItMzMuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zMTguMS0yNkwyMTguNCwzNS4yVjU3TDMyOS4zLTExQTE4Mi42NSwxODIuNjUsMCwwLDAsMzE4LjEtMjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzQxLjQsMTg3LjlMMjE4LjUsMTEyLjN2NzRMMzA0LDIzOC44QTE5Ni4zNSwxOTYuMzUsMCwwLDAsMzQxLjQsMTg3LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzM2LjQsMTk3bC0xMTgtNzIuNHYyMS44bDEwNy45LDY2LjNDMzI5LjksMjA3LjYsMzMzLjMsMjAyLjQsMzM2LjQsMTk3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTS0yOS43LDk4LjdBMTk3Ljc2LDE5Ny43NiwwLDAsMC0yMi45LDE1MGwzNzguOCwwLjJhMTk1LjM5LDE5NS4zOSwwLDAsMCwyLjktOTAuOGwtMzg0LjUtLjJBMTk2LjcxLDE5Ni43MSwwLDAsMC0yOS43LDk4LjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+=='); display: block; width: 259px; height: 243px; 

 <div id="someDiv"></div> 

CSS 3生成的內容模塊第3級將其擴展為直接應用於元素，但是該規范仍然是有效的草案。 簡介包含文字

這是一個非常粗糙的草案，尚未准備好實施。

因此，瀏覽器的實現參差不齊也就不足為奇了。