Question

我正在努力让以下内容在IE10中运行。

我有一个id=footer的div，我将该课程从class1更改为class2。

HTML代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Test</title>
    </head>
    <body>
        <div id="container">

        </div>
        <div id="footer" class="class1"></div>
    </body>
</html>

CSS代码如下

body {
    overflow: hidden;
    width:  100%;
    height:  100%;
}

#container {
    overflow:  auto;
    position: absolute;
    width:  100%;
    height:  90%;
    background-color:#808080;
    top:0;
    left:0;
    border-width: 1px;
    border-color: #000;
    border-style: groove;
}

#footer {
    overflow: auto;
    position: absolute;
    left:0;
    width: 100%;
    border-width: 1px;
    border-color:#f00;
    border-style: groove;
    background-color: #ffd800;

    transition-property: top, height;
    transition-duration: 1s, 1s;
    transition-delay: 0, 0;
}

.class1 {
    top: 90%;
    height: 10%;
}

.class2 {
    top: 70%;
    height: 30%;
}

由于我同时增加了顶部和高度，因此当我从class1 to class2更改时，我希望div只是上升/扩展，而从class2 to class1更改时只是收缩。这在Firefox中可以正常工作。

但是在IE10中，当我从class1 to class2更改时，就好像top没有遵循过渡效果一样。 div立即向上移动，然后尺寸逐渐增加超过1秒。

那么，我如何解决这个问题并在IE10中获得预期的结果？

Answer 1

我没有在IE11中体验过您所描述的动态。也许解决方案是在更改顶部之前首先将高度设置为30％。

css3过渡 - 如何使div从下到上增长

1 个答案: