Ionic 3中ion-row在IE11下高度异常问题求助

我之前维护Ionic 3项目时碰到过完全一样的问题！IE11对Flexbox的支持确实有不少遗留坑，尤其是在flex容器的高度计算这块，刚好就是你遇到的这种——ion-row没法自动适配内部ion-col的高度，导致后续内容被挤到页面下方。

问题根源 #

Ionic 3的ion-row默认依赖Flexbox布局，但IE11在处理display: flex容器时，不会像Chrome等现代浏览器那样自动根据子元素高度拉伸容器，反而会将容器高度收缩到最小，直接引发布局错位。

可行的解决方案 #

这里有两种经过验证的解决办法，你可以根据项目情况选择：

方法1：强制触发IE11的高度计算

给ion-row添加自定义CSS，通过min-height强制IE11正确计算容器高度：

ion-row {
  display: flex;
  flex-wrap: wrap;
  min-height: 1px; /* 这个属性会触发IE11重新计算容器高度 */
}

方法2：针对IE11回退到块级布局

如果方法1效果不佳，可以用IE专属的媒体查询，让ion-row和ion-col回退到传统的块级/浮动布局，彻底规避Flexbox的兼容性问题：

/* 仅针对IE11生效的媒体查询 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  ion-row {
    display: block;
  }
  ion-col {
    display: inline-block;
    float: left;
    /* 记得保留原有的宽度比例，比如col-6就设置width: 50% */
  }
}

额外提示 #

如果你的ion-col里包含动态加载的内容（比如图片、异步数据），建议同时给ion-col设置min-height，避免IE11出现高度塌陷的二次问题。

我当时用方法1就顺利解决了类似的布局错位问题，你可以先试试这个方案，应该能让IE11里的"second row"回到正确位置。

内容的提问来源于stack exchange，提问作者Mossito