测试demo 源代码：
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 6 <meta name="renderer" content="webkit"/> 7 <title></title> 8 <style> 9 html, 10 body{ 11 height:100%; 12 padding:0; 13 margin:0; 14 } 15 .div1{ 16 background:red; 17 width:500px; 18 19 height:80%; 20 min-height:300px; 21 overflow:visible; 22 } 23 .div2{ 24 background:blue; 25 width:300px; 26 27 height:100%; 28 } 29 </style> 30</head> 31<body> 32 <div class="div1"> 33 <div class="div2"></div> 34 </div> 35</body> 36</html>
关键代码：
demo 中，div1 包含 div2，div1 的样式中同时定义了 height 和 min-height。效果如下图：
- 浏览器高度为 500 时，500 * 80% = 400 > min-height : 300，div1 高 = 400
- 浏览器高度为 320 时，320 * 80% = 256 < min-height : 300，div1 高 = 300
代码中有一段用绿色边框标记的代码：overflow : visible，你可以尝试将其修改"auto"或"hidden"，之后在 IE8 中查看 demo，效果会发生变化：
- 浏览器高度为 500 时，500 * 80% = 400 > min-height : 300，div1 高 = 400
- 浏览器高度为 320 时，320 * 80% = 256 < min-height : 300，div1 高 = 300，div1 高 = 300，但是 div2 高 = 256 = 320 * 80%。div2 在计算高度时使用了 div1 的height，而不是 min-height。
造成这种现象的原因应该是 ie8 的自身 bug。
【解决方法】
第一种：在这种应用场景中，避免将 div1 的 overflow 设为 visible 以外的值。
第二种：避免 div2 的高度通过 div1 的高度计算（比如： position:absolute;top:0;left:0 来达到类似 height:100% 的效果）
ps：
1 经过测试，max-height也会发生同样的现象，当 height 超过 max-height 时，div2 的高度会根据 height 计算而非 max-height。暂未找到合适的解决方法，好在这种使用场景似乎并不常见。
2 同时定义 width 和 min-width/ max-width 显示正常。