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

【问题标题】：Html/CSS Display flex and align-items center not working on Galaxy Note 3Html/CSS Display flex 和 align-items center 在 Galaxy Note 3 上不起作用
【发布时间】：2018-02-01 00:44:59
【问题描述】：

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

当我在浏览器（使用 Chrome）和 Galaxy Note5 上进行测试时，一切都很好。但是，当我在 Galaxy Note3 上测试相同的应用程序时，它给了我不想要的结果。

display: flex 和 align-items:center 应该在 ion-row 中垂直居中对齐 span。但它只适用于 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;
}

【问题讨论】：

1.有点不清楚您在 Note3 上使用的是什么浏览器。 2. 还要比较浏览器版本，如果两者都是 Chrome。 3. 那不是有效的CSS；你在使用预处理器吗？
@Jonathan 感谢您的评论。如何找到 Note3 上使用的浏览器？正如我所提到的，我使用的是 Ionic 2，所以它使用的是 scss。
也许和你在 Note5 上的想法一样？试试 Minal Chauhan 的答案。可能是Note3上的浏览器太旧了。
如果你浏览这个网站，你会得到浏览器信息，然后可以检查它是否支持 Flexbox：whatismybrowser.com
Note3 在 Android(KitKat) 上有 Chrome 28

标签： android css ionic-framework ionic2 flexbox

【解决方案1】：

使用flexbox 和prefixes

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;
    }
}

【讨论】：

它没有帮助:(

【解决方案2】：

这可能是移动响应问题，galaxy note 5 分辨率为 1140x2560，而galaxy note 3 为 1080x1920 ..您可以尝试在这些分辨率中添加@media 样式来解决问题。

【讨论】：