怎么可能"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

Safari中有一个flexbox 错误:

在<button>和<fieldset>元素不能在Safari Flex容器.

解决方案:使用不同的包装元素,例如<a>标签.

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

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

Answer 2

我应该添加前缀吗？建议 Flexbox 仍然使用供应商前缀。有趣的是，我想说它实际上只需要在 Safari 上添加前缀。

这意味着不仅供应商为您的显示设置添加前缀，还意味着所有 Flex 框属性：

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

Answer 3

为了使iOS和台式机上的Safari和Chrome在垂直和水平方向上保持中心对齐，我必须使用：

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