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

在CSS下方使用align-items

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>