Firefox が CSS `content` プロパティを使用して画像を表示しないのはなぜですか?

Firefox ブラウザで CSS コンテンツ プロパティを使用して画像を表示できない

Web 開発の領域では、ブラウザ間の互換性が最も重要です。 CSS プロパティは特定のブラウザでは問題なく表示される場合がありますが、他のブラウザでは不一致が発生する可能性があります。一例は、画像などのさまざまな要素のコンテナとして機能する content プロパティです。

この問題を説明するために、次の CSS クラスを考えてみましょう:

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

で使用される場合Google Chrome および Safari ブラウザでは、上記の CSS は指定された URL からの画像を正常に表示します。ただし、Firefox ブラウザ経由でアクセスすると、画像のレンダリングに失敗します。

根本原因の詳細

ブラウザ間の不一致は、コンテンツプロパティ。 Google Chrome と Safari は URL 参照によるコンテンツの使用をサポートしていますが、Firefox ではより具体的な構文が必要です。

解決策: 擬似要素の利用

この問題を解決するには、ブラウザ間の互換性を確保するには、::before 疑似要素を使用して、実際のコンテンツの前に要素のコンテンツを変更できます。この場合、CSS は次のようになります:

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

::before 疑似要素を使用することで、.googlePic クラスの実際のコンテンツの前にコンテンツを挿入する必要があることを明示的に指定し、適切なコンテンツを確保します。 Firefox での画像レンダリング。

追加考慮事項

私たちのソリューションはブラウザ間の互換性の問題に対処していますが、さらに考慮すべき点がいくつかあることに注意することが重要です。

• content プロパティは、最新のブラウザでサポートされています。 Internet Explorer 8 (IE8) などの古いブラウザでは、content プロパティが機能するために DOCTYPE 宣言が必要です。
• コード例で指定された URL は、表示する画像への実際のパスに置き換える必要があります。

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