android - Html/CSS Display flex 和 align-items center 在 Galaxy Note 3 上不起作用

Question

我正在使用 Ionic Framework 构建应用程序。在开发应用程序时，我遇到了这个问题。

当我在浏览器(使用 Chrome)和 Galaxy Note5 上进行测试时，一切正常。然而，当我在 Galaxy Note3 上测试同一个应用程序时，它给了我不想要的结果。

display: flex with align-items:center 应将 span inside ion-row 垂直居中对齐。但它只适用于Chrome(我只在Chrome上测试过)和Galaxy Note5等浏览器，不适用于Galaxy Note3。

问题的原因是什么？我该如何解决这个问题？任何建议或意见将不胜感激。

提前谢谢你。

HTML

<ion-row (click)="(!this.driver_docs.Insurance ? takePicture('Insurance') : (!this.driver_docs.Insurance.Examination ? view(this.driver_docs.Insurance.ori_info, 'Insurance', 'False') : view(this.driver_docs.Insurance.ori_info, 'Insurance', 'True')))">
    <img class="management-icon" src="assets/images/mypage/insurance.png" />
    <span class="title">Insurance Managment</span>
</ion-row>

CSS

ion-row {
    position: relative;
    height: 57px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E3E3E3; 
}
.title {
    position: absolute;
    left: 43px;
    font-size: 15px;
    font-weight: 400;
    color: #545556;
}

Answer 1

使用带有前缀的flexbox

ion-row {
    position: relative;
    height: 57px;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    border-bottom: 1px solid #E3E3E3;
    .title {
        position: absolute;
        left: 43px;
        font-size: 15px;
        font-weight: 400;
        color: #545556;
    }
}