內容屬性在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並在Chrome，Firefox和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標籤的方法，因爲您的徽標是內容，所以它更好，語義更準確。