Css 在不同的浏览器版本和操作系统上无法正确渲染站点

我目前正在开发一个网站，我在浏览器兼容性方面遇到了一些问题，但我不确定问题出在哪里，所以我希望得到一些帮助来缩小问题的范围

一般来说，最新的浏览器版本似乎一切正常，但我希望能够支持至少几个版本，而不仅仅是最新的版本

很多网站都是使用Flexbox进行安排的，所以我认为这可能是问题所在，但我已经包括了我知道的所有供应商前缀，并且没有看到任何更改（参见示例）

以下是该网站的链接：

到目前为止，在以下方面一切都很好：

MacBookPro（2009年年中） （OS X El Capitan 10.11.6）：

• Chrome-版本57.0.2987.98（64位）
• Safari-版本10.0.3（11602.4.8.0.1）
• Firefox-52.0版（64位）

iphone5c （iOS版本10.2.1（14D27））：

• Safari-版本602.1

华硕ZenPad 8.0 z380c （安卓5.0.2版）：

• Chrome-版本56.0.2924.87

三星Galaxy Note 8.0 gt-n5110 （安卓版本4.4.2）：

• Chrome版本56.0.2924.87

---

这些都是问题：

华硕ZenPad 8.0 z380c （安卓5.0.2版）：

Chrome-版本43.0.2357.93

问题：

• 未显示的图像

三星Galaxy Note 8.0 gt-n5110 （安卓版本4.4.2）

Chrome版本55.0.2883.91

问题：

• 标识字体错误
• 没有地图
• 没有显示社交链接

iPad（旧款，但不确定是哪款） （iOS-版本9.3.5）

Safari-版本未知

问题：

• 未显示的图像
• 正文被压缩在一起

---

以下是一些来自华硕和三星平板电脑的图片：

很抱歉发了这么长的帖子，但我想提供足够的信息。如果有人对可能出现的问题以及如何解决这些问题有任何想法，那将是令人惊讶的

---

谢谢

Flexbox即使在最新的浏览器上也存在一些问题。您应该查看并实现此存储库： 您还应该了解autoprefixer，它可以防止您必须写入所有供应商前缀：

---

对于初学者来说，设置可能有点复杂，但是你应该很容易找到教程

试试这个：它可以帮助您模拟不同的浏览器和设备。您还可以使用firebug&可以了解发生了什么。@OmarFaruque谢谢。以前使用过browserstack，但从未听说过firebug。我会查出来的。谢谢，它们看起来真的很有用。我会看看他们两个。写出所有的前缀肯定很痛苦！

display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;