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

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

问题：

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

iPad（旧，但不确定哪个型号）

（iOS - 版本 9.3.5）

Safari - 版本未知

问题：

• 图片未显示
• 正文压缩在一起

---

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

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

谢谢！

Answer 1

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

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