让 CSS 代码段兼容多种浏览器？答案

【问题标题】：Making CSS code segment compatible with multiple browsers?让 CSS 代码段兼容多种浏览器？
【发布时间】：2017-01-14 12:39:22
【问题描述】：

我有大约一周的 CSS/HTML 经验，现在已经被这个问题难住了大约半个小时。我真的不知道如何调整此代码段以使其在不同的浏览器上成功运行。它在 Chrome 上运行良好，将图片排列成四排，均匀分布，但不适用于 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>

【问题讨论】：

您在哪个版本的 Safari 上进行测试？如果是 6.1 或以下，我建议在 display: flex 和 justify-content: space-between 之前使用 -webkit-。
选中此项以查看浏览器支持：w3schools.com/cssref/css3_pr_justify-content.asp。较旧的浏览器需要特定于供应商的标签，例如 -moz- 用于 firefox，-webkit- 用于 safari 等。

标签： html css image cross-browser

【解决方案1】：

我在 PC 上，没有 safari 来检查它，但我建议像这样在内部 div 中添加 in-line 块：

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

我还更改了宽度，以便它可以响应地缩放而不是分成另一行。

【讨论】：