0

我正在尝试使以下内容在 IE10 中工作。

我有一个 div 与id=footer我将类从 更改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%;
}

由于我同时增加了顶部和高度，因此我希望 div 在我更改时会上升/扩展，class1 to class2而在更改时会收缩class2 to class1。这在 Firefox 中按预期工作。

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

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

4

1 回答 1

0

我没有在 IE11 中体验过您描述的动态。也许解决方案是先将高度设置为 30%，然后再更改顶部。

于 2013-12-08T07:35:58.407 回答