Firefox が CSS `content: url()` を使用して画像を表示しないのはなぜですか?

コンテンツ URL を使用して宣言された画像が Firefox に表示されない

CSS スタイルのコンテキストでは、コンテンツ プロパティを利用して前後にコンテンツを追加します要素。ただし、コンテンツ プロパティを使用して Firefox で画像を表示する場合、Google Chrome などの他のブラウザではシームレスに機能するときに、一般的な問題が発生します。

要素に画像を追加するために使用される次の CSS クラスを考えてみましょう。

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

このクラスを要素に適用すると、Firefox では画像が表示されません。この問題を解決するには、content プロパティを ::before または ::after 疑似要素と組み合わせて使用​​する必要があります。画像宣言を ::before 疑似要素内でラップすると、Firefox は画像を正しく表示します。

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
}

IE8 では、content プロパティは !DOCTYPE が指定されている場合にのみサポートされることに注意してください。指定されています。

以上がFirefox が CSS `content: url()` を使用して画像を表示しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。