Internet Explorer 10 css3 过渡高度未与父填充底部值发生答案

【问题标题】：Internet Explorer 10 css3 transition height not happening with parent padding-bottom valueInternet Explorer 10 css3 过渡高度未与父填充底部值发生
【发布时间】：2015-01-09 07:18:14
【问题描述】：

我有一个容器 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 中的 padding-bottom）的情况下为 ie10 解决这个问题？

【问题讨论】：

标签： html css internet-explorer internet-explorer-10

【解决方案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 小提琴： http://jsfiddle.net/r8rjhy9v/

【讨论】：

【解决方案2】：

对于 IE 10...

经过大量实验，我得出以下结论：

将calc() 与height: 属性一起使用会导致IE10 至少忽略transition-property:height 效果。
max-height:property 充当掩码，其中元素的大小实际上是 height: 属性声明的大小，但只有 max-height: 属性大小可见。
transition-property:height 效果从完整的height: 开始元素（这与元素的隐藏部分一样明显滞后掩码下的元素转换）
您需要同时使用height: 和max-height: 才能让transition-property:height 工作。

http://jsfiddle.net/Neoheurist/5ax5o1ge

HTML

<div class='accordion'>
    <section class='sash greedy'>
    </section>
</div>

CSS

.accordion {
    background:black;
    height:10.0em;
}

.accordion .sash {
    background:red;

    height:2.0em;
    max-height:calc(100% - 2em);
    transition-property:height;
    transition-duration:1000ms;
}

.accordion .sash.greedy:hover {
    max-height:calc(100% - 2em);
    height:100%;
}

【讨论】：