Html Internet Explorer 10 css3转换高度未与父项填充底部值一起发生

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

它有一个具有固定高度和宽度的内部div，在悬停时，该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结构的情况下为ie10解决这个问题（在父div中填充底部）？

尝试对

#inside

进行以下更改：

• 添加

  最小宽度：30px和<代码>最小高度：30px

• 更改

  宽度：30px至<代码>宽度：1%和<代码>高度：30px至<代码>高度：1%

#容器：悬停#内部{
身高：100%；
宽度：100%；
}
#容器{
背景：黑色；
身高：0；
垫底：30%；
位置：相对位置；
宽度：30%；
}
#里面{
背景：粉红色；
身高：1%；
左：0；
最小高度：30px；
最小宽度：30px；
位置：绝对位置；
排名：0；
-webkit过渡：宽度0.4s，高度0.4s；
-moz过渡：宽度0.4s，高度0.4s；
-o型过渡：宽度0.4s，高度0.4s；
-ms过渡：宽度0.4s，高度0.4s；
过渡段：宽度0.4s，高度0.4s；
宽度：1%；
}

用于IE 10

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

将
calc（）
与
height:
属性一起使用会导致IE10至少
忽略过渡属性：高度的效果
max-height:
属性充当掩码，其中元素的大小实际上是
height:
属性声明的大小，但仅在
max-height:
属性大小之前可见
transition属性：height
效果从
元素（这是一个明显的滞后，因为它是
遮罩下的元素转换）
您需要同时使用
height:
和
max height:
来获得
transition属性：height

HTML

#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%;
}

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

.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%;
}