网站无法在不同的浏览器版本和操作系统上正确呈现

Question

我目前正在开发一个网站，我在浏览器兼容性方面存在一些问题，但我不确定问题出在哪里/哪里，所以我希望能够帮助缩小范围。

通常情况下，最新的浏览器版本似乎都没问题，但我希望能够支持至少几个版本，而不仅仅是最新版本。

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

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;

以下是该网站的链接：development.seanbaines.com/bobbys_sportsbar

到目前为止，一切都很好：

MacBook Pro（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位）

iPhone 5c

（iOS版本10.2.1（14D27））：

• Safari - 版本602.1

华硕ZenPad 8.0 z380c

（Android版本5.0.2）：

• Chrome - 版本56.0.2924.87

三星Galaxy Note 8.0 gt-n5110

（Android版本4.4.2）：

• Chrome版本56.0.2924.87

这些都是问题所在：

华硕ZenPad 8.0 z380c

（Android版本5.0.2）：

Chrome - 版本43.0.2357.93

的问题：

• 图片未显示

三星Galaxy Note 8.0 gt-n5110

（Android版本4.4.2）

Chrome版本55.0.2883.91

的问题：

• logo
的字体错误
• 没有地图
• 未显示社交链接

iPad（旧的，但不确定是哪种型号）

（iOS - 版本9.3.5）

Safari - 版本未知

的问题：

• 图片未显示
• 身体副本压扁了

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

很抱歉这篇长篇文章，但想提供足够的信息。如果有人对问题可能是什么以及如何解决它们有任何想法，那将是惊人的。

谢谢！

Answer 1

众所周知，即使在最新的浏览器上，Flexbox也存在一些问题。您应该查看此存储库并实现它：https://github.com/luisrudge/postcss-flexbugs-fixes 您还应该看看autoprefixer，它可以阻止您编写所有供应商前缀：https://github.com/postcss/autoprefixer

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