Flexbox 在带有 Safari 的 iPad 3 上无法正常工作

Question

我的flexbox 有问题。当我在 Chrome 或任何其他浏览器中时，一切正常。

但是，当我使用带有 Safari 的 iPad 3 时，我的 flexbox 无法正常工作。我用过-webkit-，但还是不行。

img 必须是绝对定位的，否则链接会得到img 的高度，否则会破坏我的整个导航。

如图所示，图标不再居中，因此align-items 不起作用：

这就是它的样子：

那么我该如何解决这个问题？

li {
    display: inline-block;
    font-size: 14px;
    padding: 5em;
}

a {
    padding-right: 46px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

a img {
    width: 35px;
    height: auto;
    position: absolute;
    right: 0;
}

<li>
<a href="https://www.google.de" aria-current="page">Max Mustermann
  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png" class="avatar avatar-70 photo wpfla round-avatars " width="70" height="70">
</a>
</li>

Answer 1

在align-items下面使用css

align-items: center;
-webkit-align-items: center;

li {
    display: inline-block;
    font-size: 14px;
    padding: 5em;
}

a {
    padding-right: 46px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

a img {
    width: 35px;
    height: auto;
    position: absolute;
    right: 0;
}

<li>
<a href="https://www.google.de" aria-current="page">Max Mustermann
  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png" class="avatar avatar-70 photo wpfla round-avatars " width="70" height="70">
</a>
</li>