“display: flex"怎么可能呢?和“对齐项目:居中"不再在我的 iphone 上工作?

问题描述

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

Hello guys is really strange what happened to me today ...I'm working on a code to create submenus, and I used the property

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

这样各个部分(标签li)的声音就垂直居中了.我之前曾多次将这些属性用于其他代码，并且它们始终正常工作.和往常一样，我在 Mac、iPhone 5、firefox 和 chrome 上检查代码.

in this way the voices of the various sections (tags li) are centered vertically.I have used these properties many times before for other codes and they have always worked correctly. As always, I check the code on my mac, on the iPhone 5, on firefox and chrome.

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

But as soon as I see the file via my iphone 5 (version 8.3) I was shocked .... the properties were not working. I have displayed the old files and even with them the same problem occurred.

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

The amazing thing is that the mc works wonderfully well with the iPhone 5 to my brother (updated to version 9.x):

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

I do not understand .... but how is that possible?

这是一个错误?还是我的iphone坏了?

It 'a bug? or my iphone is broken?

推荐答案

有一个 flexbox bug 在 Safari 中:

There is a flexbox bug in Safari:

和 元素不能是 Safari 中的弹性容器.

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

Solution: use a different wrapping element, e.g. an <a> tag.

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

If you can't or don't want to change the element, you can fix it using box-orient:

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

这篇关于“display: flex"怎么可能呢?和“对齐项目:居中"不再在我的 iphone 上工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！