ios - "display: flex"和 "align-items: center"怎么可能在我的 iphone 上不再工作了？

Question

大家好，今天发生在我身上的事真的很奇怪......我正在编写代码来创建子菜单，并且我使用了该属性

 display: -webkit-flex;
 display: flex;
 align-items: center;

通过这种方式，各个部分(标签 li)的声音垂直居中。我之前曾多次将这些属性用于其他代码，并且它们始终可以正常工作。与往常一样，我在我的 Mac、iPhone 5、Firefox 和 Chrome 上检查代码。

但是，当我通过我的 iphone 5(8.3 版)看到该文件时，我感到震惊......这些属性无法正常工作。我已经显示了旧文件，即使使用它们也出现了同样的问题。

令人惊奇的是，mc 与我兄弟的 iPhone 5(更新到版本 9.x)配合得非常好:

我不明白....但这怎么可能？

这是一个错误？或者我的 iPhone 坏了？

Answer 1

有一个flexbox bug在 Safari 中:

The <button> and <fieldset> elements can't be flex containers in Safari.

解决方案:使用不同的包装元素，例如一个<a>标签。

如果您不能或不想更改元素，可以使用 box-orient 修复它:

display: -webkit-box;
-webkit-box-orient: horizontal;