html - 如何使用 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);
}

当我将 height 属性中的 calc 替换为 px 时或 % ，过渡工作正常，但使用 calc , 只是从一个高度到另一个高度而没有过渡。

其他浏览器正常，只有IE有问题

---

添加代码和 JSFiddle example跟我的真实情况差不多。

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

this呢？ ？就像您的代码片段(在我看来)一样工作，在 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>