如何使用calc属性在IE中使转换属性工作？

Question

element1 {
    height: calc(100% - 50px);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

element1:hover {
    height: calc(100% - 200px);
}

当我在高度属性中用px或替换calc时%,过渡工作正常,但是calc,只有从一个高度到另一个高度没有过渡.

在其他浏览器中它工作正常,问题只在IE中

---

添加代码和JSFiddle示例类似于我的实际情况.

div{
    position: fixed;
    right: 0;
    width: 250px;
    height: calc(100% - 200px);
    background: #1c8080;
    top: 158px;
    color: #fff;
    text-align: center;
    padding-top: 40px;
    font-size: 18px;
    border: 1px solid #000;
    
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

div:hover{
    height: calc(100% - 100px);
    top: 58px;
}

.bottom{
    position: absolute;
    bottom: 15px;
    width: 100%;
    font-size: 26px;
}

<div>
    <p>Height's tansition</p>
    <p>Works fine in Chrome, FF</p>
    <p class="bottom">But not in IE</p>
</div>

是的,我知道,在我的情况设置bottom: 0的<div>,只有变化的高度,它也可以,但由于IE浏览器的漏洞,从一个高度到另一个唯一的变化,这就是为什么我在模拟的效果,改变了榜首位置和高度.

那么,我怎样才能在IE中模拟这种效果呢？

注意:我不能使用Viewport单位:vh, vw.

PD:在我的情况下IE的罕见行为是因为从过渡top: value到top: otherValue工作但过渡height: calc(value)到height: calc(otherValue)没有,这只是为了指导.

Answer 1

那这个呢？就像你的代码片段一样（在我看来），在 IE10/IE11 中没问题。或者是我没了解你的真实情况。

html, body {
    width: 100%;
    height: 100%;
}

div {
    position: fixed;
    right: 0;
    width: 250px;
    bottom: 0;
    background: #1c8080;
    top: 158px;
    color: #fff;
    text-align: center;
    padding-top: 40px;
    font-size: 18px;
    border: 1px solid #000;
    
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

div:hover {
    top: 58px;
}

.bottom {
    position: absolute;
    bottom: 15px;
    width: 100%;
    font-size: 26px;
}

<div>
    <p>Height's transition</p>
    <p>Works fine in Chrome, FF</p>
    <p class="bottom">But not in IE</p>
</div>