在IE10 / 11中使用Calc（）过渡高度

Question

在我们开始之前我想说我已经看过使用calc（）来过渡IE中的宽度和高度，但我的问题是接受这个问题的接受答案。

现在接受的答案肯定适用于IE 11以及我测试的其他浏览器，但是对于我正在创建的webapp我只需要转换Div的高度，而不是宽度。 因此，我重新创建了接受的答案解决方案，将max-width更改为max-width max-height ，但这似乎与高度仍然不会转换的方式相同。

这是修改后接受的答案的小提琴： https ： //jsfiddle.net/esfqqm4p/

.container{
  height: 100px;
  width: 200px;
}

.block {
    width: 100%;
    height: 100%;
    background-color: red;
    transition: all 1s ease-in-out;
    margin: 10px;
    padding-left: 10px;
}

.doesntwork:hover {
    max-height: 50%;
    height: 100%;
}
.works:hover {
    height: 175px;
}

与max-width相比，为什么max-height在这种情况下的表现不同？ 有没有我错过的东西？ 在IE10 / 11中是否有过渡高度的解决方案？

Answer 1

所以我昨天花了一些时间，今天尝试了多个纯CSS解决方案，但无济于事。 最后我决定使用JQuery Animate函数来实现我在IE中运行良好的目标。

这是一个展示解决方案的小提琴：

https://jsfiddle.net/uwrosa3m/

function startAnim(){
    if(!$('.block').hasClass("shrunk")){
    $('.block').addClass("shrunk");
    $('.block').animate({ 'height': '50%' }, 500);
  }
  else{
    $('.block').removeClass("shrunk");
    var height = ($('.block').height() * 2) - 10;
    $('.block').animate({ 'height': height }, 500);
  }
}

而不是在我的CSS中使用calc（）来计算高度，我只是简单地让JQuery处理这个问题。

如果有人能找到一个纯CSS解决方案，那么请发布它，我会接受它作为答案。