使CSS代碼段與多個瀏覽器兼容？

我有大約一週的CSS/HTML體驗，並且已經在這個問題上困擾了大約半個小時。我真的不知道如何調整這段代碼，以便它能夠在不同的瀏覽器上成功運行。它可以在Chrome上正常工作，將圖片排列成四行，均勻分佈，但不適用於Safari。我還沒有測試過它是否適用於Firefox。如果有人能告訴我如何適應這些代碼，我將非常感激。使CSS代碼段與多個瀏覽器兼容？

#containermain { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
#containermain div { 
 
    width: 250px; 
 
    height: auto; 
 
    background: rgb(255, 255, 255, 0); 
 
} 
 
#containermaintext div { 
 
    width: 250px; 
 
    height: auto; 
 
    background: rgb(255, 255, 255, 0); 
 
} 
 
#containermain div:first-child { 
 
    border-left: 0; 
 
} 
 
#containermain div:last-child { 
 
    border-right: 0; 
 
}

<div id="containermain" class="slideExpandUp"> 
 
    <div> 
 
    <a href="physics.html"> 
 
     <img src="images/atom.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 

 
    <div> 
 
    <a href="math.html"> 
 
     <img src="images/mathematics.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 

 
    <div> 
 
    <a href="humanities.html"> 
 
     <img src="images/books.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 

 
    <div> 
 
    <a href="stem.html"> 
 
     <img src="images/stem.png" style="width: 100%;"> 
 
    </a> 
 
    </div> 
 
</div>

來源

2016-09-06 John Ta

您正在測試哪個版本的Safari？如果6.1或更低，我推薦在'display：flex'和'justify-content：space-between'之前使用'-webkit -'。 – StardustGogeta

選中此項查看瀏覽器支持：http：//www.w3schools.com/cssref/css3_pr_justify-content.asp。舊版瀏覽器需要供應商特定的標籤，例如-moz-用於firefox，-webkit-用於Safari等。 – pol

我是一臺PC上，並沒有Safari瀏覽器來檢查，但我建議增加在線塊裏面的div像這樣：

 #containermain div { 
      /*width: 250px;*/ 
      width: 20%; 
      display:inline-block; 
      height: auto; 
      background: rgb(255,255,255,0); 
     }

我也改變了寬度，以便它響應地縮放，而不會闖入另一行。

來源

2016-09-07 00:07:39 buggy

使CSS代碼段與多個瀏覽器兼容？

回答

相關問題