CSS `content` プロパティを使用すると、Firefox で画像が表示されないのはなぜですか?

Firefox ブラウザーの画像表示の問題

CSS クラス内で画像を表示しようとして、content プロパティが利用されました:

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

このアプローチは Google Chrome と Safari での画像のレンダリングには効果的であることが証明されましたが、予期せぬ問題が発生しました。 Firefox: 画像を表示できませんでした。

解決策:

問題は、Firefox の content プロパティの実装にあり、主に ::before および : と互換性があります。 :疑似要素の後。この状況を修正するには、CSS コードを次のように変更します。

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

::before 疑似要素を利用すると、Firefox でも画像を正常に表示できます。 content プロパティの使用法について詳しくは、提供されているドキュメントのリンクを参照してください:

http://www.htmldog.com/reference/cssproperties/content/

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