svg + xml base64 url​​はコンテンツでfirefoxの問題をコードしています：url（）;

Question

このソリューションはChromeで動作していましたが、FFやIEでは動作しませんでした。

私は他のトピックに読んだとしてbase64エンコードとURLにSVGを変更しました。

imgタグでは、svgは正常に動作しますが、content: url();で使用すると動作しません。ここで

にのみに適用されますCSS 2 Specificationコンテンツでfiddle

#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

です：beforeと：after疑似要素。 Firefoxはこの

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

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

CSS 3 Generated Content Module Level 3はこれが要素に直接適用するために拡張実装していますが、その仕様はまだワーキングドラフトです。はじめに本文が含まれています

これは非常に原案であり、実装の準備ができていません。

だから、ブラウザの実装がむらであることは驚くべきことではありません。