“display: flex"怎么可能呢?和“对齐项目:居中"不再在我的 iphone 上工作? [英] How is possible that "display: flex" and "align-items: center" do not work anymore on my 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 中的弹性容器.

The <button> and <fieldset> elements can't be flex containers in 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 上工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！