CSSコードセグメントを複数のブラウザと互換性を持たせますか？

Question

私は約1週間分のCSS/HTMLエクスペリエンスを持っており、この問題については30分ほど悩まされています。私は本当に、このコードセグメントをさまざまなブラウザで正常に動作させるためにこのコードセグメントをどのように適応させるべきかわかりません。 Chrome上でうまく動作し、4行の画像を均等に配置して整列させますが、Safariでは機能しません。 Firefox上で動作するかどうかはテストしていません。誰かが私にこのコードをどのように適応させるかを示すことができれば、私はそれを非常に高く評価します。

#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>

Answer 1

私はPC上だし、それをチェックするためにサファリを持っていますが、私はこのような内部のdiv要素にインラインブロックを追加することはお勧めしません：

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

また、幅を変更して、それに応じて縮尺を変え、別の行に分割しないようにしました。