Flexbox在使用Safari的iPad 3上无法正常工作

Question

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

但是当我在Safari 3的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>