html - Internet Explorer 10 css3 过渡高度不会随父填充底部值发生

Question

我有一个容器 div，为了使其与窗口宽度相关(并保持方形比例)具有以下 css:

JSFIDDLE

#container {
    width:30%;
    height:0;
    padding-bottom:30%;
    position: relative;
}

它有一个固定高度和宽度的内部 div，悬停时应该变为 100%(两者)并带有过渡:

#inside {
    position:absolute;
    top:0;
    left:0;
    width:30px;
    height:30px;
    -webkit-transition: width 0.4s, height 0.4s;
    -moz-transition: width 0.4s, height 0.4s;
    -o-transition: width 0.4s, height 0.4s;
    -ms-transition: width 0.4s, height 0.4s;
    transition: width 0.4s, height 0.4s;
}

#container:hover #inside {
    width: 100%;
    height:100%;
}

在 Chrome,Firefox,Opera,Safari 中没有问题。然而，Internet Explorer 10 不会转换高度值，因此会发生跳跃。 有没有一种方法可以在不触及 div 的结构(父 div 中的填充底部)的情况下为 ie10 解决这个问题？

Answer 1

尝试对 #inside 进行以下更改:

• 添加 min-width: 30px; 和 min-height: 30px;
• 将 width: 30px; 更改为 width: 1%; 并将 height: 30px; 更改为 height: 1%;

#container:hover #inside {
    height: 100%;
    width: 100%;
}
#container {
    background: black;
    height: 0;
    padding-bottom: 30%;
    position: relative;
    width: 30%;
}
#inside {
    background: pink;
    height: 1%;
    left: 0;
    min-height: 30px;
    min-width: 30px;
    position: absolute;
    top: 0;
    -webkit-transition: width 0.4s, height 0.4s;
    -moz-transition: width 0.4s, height 0.4s;
    -o-transition: width 0.4s, height 0.4s;
    -ms-transition: width 0.4s, height 0.4s;
    transition: width 0.4s, height 0.4s;
    width: 1%;
}

<div class="out" id="container">
    <div id="inside"></div>
</div>

JS fiddle : http://jsfiddle.net/r8rjhy9v/