IE中clientHeight失效：父子元素高度获取异常的排查与解决

我来帮你捋捋这个问题哈，其实这是IE浏览器对CSS高度计算和Grid布局的兼容性差异导致的，咱们一步步来解决：

问题根源 #

1. 百分比高度的依赖链问题：Chrome会自动处理视口高度的继承，但IE要求百分比高度的元素，其所有父级（包括html和body）必须显式设置height: 100%——默认情况下html和body的高度是由内容撑开的，不是100%视口高度，所以你父元素的height:100%在IE里相当于“无中生有”，子元素自然没高度。
2. IE的Grid布局兼容性：你用的display: -ms-grid是IE的旧版Grid语法，和标准Grid差异很大，默认情况下子元素不会自动填充父元素的空间，必须明确配置行/列尺寸和子元素的位置。

具体解决方案 #

方案1：补全高度继承链 + 修正IE Grid写法

首先给html和body加上高度设置，然后调整父元素的IE Grid属性，给子元素指定位置：

/* 先让html和body占满整个视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#parent{ 
  height: 100%; 
  min-height:100%; 
  min-width:100%; 
  background-color:red; 
  display:grid; 
  display: -ms-grid;
  /* IE Grid需要明确行和列的尺寸，用1fr让它占满可用空间 */
  -ms-grid-rows: 1fr;
  -ms-grid-columns: 1fr;
  align-items:stretch; 
  position:relative; 
}

/* 给子元素指定在IE Grid中的位置 */
#child{
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

方案2：改用Flex布局（IE兼容性更好）

如果不需要严格用Grid，换成Flex布局会更省心，IE对Flex的支持更完善：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#parent{ 
  height: 100%; 
  min-height:100%; 
  min-width:100%; 
  background-color:red; 
  display:flex; 
  display: -ms-flexbox;
  -ms-flex-align: stretch; /* IE下的align-items:stretch */
  align-items:stretch; 
  position:relative; 
}

这样子元素会自动拉伸填满父元素的高度，Chrome和IE都能正常显示。

验证方法 #

修改后刷新IE浏览器，你可以通过开发者工具查看子元素的高度，应该就能看到和Chrome一致的数值了。

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