基于 Flexbox 的 CSS 无法在任何 iOS 浏览器上运行

Question

我在我的网站上使用 Jade、Stylus 和 Node JS。它在桌面 Chrome、Firefox、IE 和 Edge 上运行良好。它在 Android Chrome 和浏览器上运行良好。它在 iOS Chrome 或 Safari 上无法正常运行，两者都显示出类似的故障。它也不适用于桌面上的 Safari。它似乎适用于 iOS9，但不适用于 iOS8 或更低版本。

这是一个屏幕截图，显示了 Android 上的移动 Chrome 和 iOS 上的移动 Chrome 之间的区别。 http://imgur.com/a/kjU23

即使我明确放置 -webkit-，并且 nib 在编译后的 CSS 中生成 -webkit- 前缀，为什么它在移动 iOS 浏览器上不起作用？这是我在 Github 上的完整 CSS。 https://github.com/Connorelsea/LSMSA-SGO-Website/tree/master/public/css

用于测试和演示的现场网站在这里：http://www.lsmsaSGO.com

该网站的完整 Stylus 代码有几千行，但示例如下。我的手写笔代码：

.addMore
    text-align center

    .multButtons
        width 100%
        display -webkit-flex
        display flex
        justify-content center
        -webkit-justify-content center
        align-items center
        -webkit-align-items center
        flex-direction column
        -webkit-flex-direction column

使用 Stylus 和 Nib 编译的 CSS。

  .addMore {
    text-align: center;
  }
  .addMore .multButtons {
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-direction: column;
  }

Answer 1

在.issueContainer 上关闭flex 似乎可以解决我的问题。

.issueContainer {
    /* display: -webkit-flex; */
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
}

.issueContainer 不需要 flexbox 来使其成为子堆栈，因为无论如何这是默认行为。

Answer 2

使用Autoprefixer CSS online，您将获得 CSS 规则的所有当前供应商前缀。这是你会得到的结果：

.addMore .multButtons {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

Answer 3

我的猜测是，这可能由于多种原因而发生。但是您知道您可以查看设备生成的 HTML 输出吗？如果不是：在 iphone/ipad 模拟器（不是实际设备）上加载页面。然后，在您的 Mac 上打开 Safari（同样不在设备上）。在工具栏中，转到 Preferences > Advanced 并选择“Show Develop menu in menu bar”。

然后选择开发 > 模拟器并选择适当的网页。通过一些调查，您应该能够找到为设备生成的确切输出。

我遇到过几次这样的问题，通常我只能使用上述方法调试它们。

更新 1 (iOS9)： 实际上。 Here's a link to the generated source code. 这是页面在 iPhone 5 模拟器上的样子：

更新 2 (iOS8)：

这是运行操作系统 iOS8。 Here's a link to the source