IE10中高度变化后Div消失问题及布局实现求助

嘿，我来帮你搞定这个IE10的兼容性问题！根据你描述的场景和给出的CSS代码，底部行切换hidedashboard类后消失，大概率是IE10对CSS过渡、calc()以及定位的渲染特性导致的，下面给你一步步的解决方案：

1. 先修复过渡语法的小错误 #

你代码里的.row.bottom过渡规则少了时长单位，IE10对CSS过渡的时长要求严格，无单位的时长会被浏览器忽略，进而导致过渡异常甚至元素消失：

/* 原错误代码 */
transition: max-height 0.5 ease-in;
/* 修复后 */
transition: max-height 0.5s ease-in;

2. 完善定位上下文 #

你的父元素>div:first-child用了position: absolute，但它的父级.row.main-body没有设置定位上下文，IE10在这种情况下对绝对定位元素的高度计算容易出问题：

.container-fluid {
  .row.main-body {
    height: 100%;
    width: 100%;
    position: relative; /* 新增：给绝对定位子元素提供上下文 */
    >div:first-child {
      position: absolute;
      left: 0;
      right: 0;
      height: 100%;
      transition: $transition-length;
      /* ... 其他代码 */
    }
  }
}

3. 调整底部行的高度逻辑 #

.row.bottom同时设置height: 100%和max-height，在IE10里会触发渲染冲突，建议去掉height:100%，让max-height单独控制高度：

.row.bottom {
  max-height: calc(100% - 356px);
  /* 去掉 height: 100%; */
  transition: max-height 0.5s ease-in;
  &.hidedashboard {
    max-height: 100%;
    transition: max-height $transition-length;
  }
}

如果必须保留高度设置，可以改成height: auto;，避免和max-height的过渡逻辑冲突。

4. IE10专属兼容方案（如果以上方法仍无效） #

如果IE10还是出现消失问题，可以直接给IE10禁用过渡效果（毕竟IE10的过渡支持本身就有限），用媒体查询针对IE10设置专属样式：

/* 仅针对IE10+的媒体查询 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .row.bottom {
    transition: none !important; /* 关闭过渡，直接切换高度 */
  }
  .row.bottom.hidedashboard {
    max-height: 100% !important;
  }
}

另外还要检查你定义的$transition-length变量是否带了有效单位（比如0.3s），无单位的变量值在IE10里同样会导致过渡失效。

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