FirefoxとIEでコンテンツプロパティが機能しない

Question

私のプロジェクトでコンテンツプロパティを使用して画像を表示したいのですが、Google Chromeでは問題なく動作していますが、FirefoxやIEでは正常に動作していません。 これは解決策を見つけることに私を助けてくださいHTML

 <div class="row"> 
      <div class="col-xs-3 col-sm-1 col-sm-push-2"> 
      <a href="https://www.facebook.com/..."> 
       <div class="fb-logo"></div> 
      </a> 
      </div> 
     </div> 

これは私のCSS

.fb-logo{ 
    content: url(/assets/images/fb.png); 
    width: 100%; 
    display: inline-block; 
    max-width: 36px; 
    margin-top: 2%; 
    cursor: pointer; 
} 

.fb-logo:after{ 
    content: url(/assets/images/fb.png); 
    width: 100%; 
    display: inline-block; 
    max-width: 36px; 
    margin-top: 2%; 
    cursor: pointer; 
} 

です。

Answer 1

私はあなたのCSSを微調整し、クロム、ファイアフォックス、IEでテストしましたが、すべて期待通りに機能しました。

.fb-logo::before{ 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 36px; 
 
    max-width: 36px; 
 
    margin-top: 2%; 
 
    cursor: pointer; 
 
    background: green url("https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png") no-repeat; 
 
    background-size: contain; 
 
} 
 

 
.fb-logo-image { 
 
    width: 100%; 
 
    max-width: 36px; 
 
    height: auto; 
 
    margin-top: 2%; 
 
}

<div class="row"> 
 
      <div class="col-xs-3 col-sm-1 col-sm-push-2"> 
 
      <a href="https://www.facebook.com/..."> 
 
       <div class="fb-logo"></div> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     
 
     
 
     <div class="row"> 
 
      <div class="col-xs-3 col-sm-1 col-sm-push-2"> 
 
      <a href="https://www.facebook.com/..."> 
 
       <img class="fb-logo-image" src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" /> 
 
      </a> 
 
      </div> 
 
     </div>

アイコンは最大幅の36pxを持っているので、私は私の答えを更新しました。 imgタグを使用する別のアプローチが含まれています。あなたのロゴはコンテンツであるため、はるかに良く、意味的に正しいものです。