使'box-sizing:border-box'在IE9-10中不起作用的Css规则

Question

我有一些 css 规则在 ie9-10 中无法正常工作。 有父div(具有 box-ssize：border-box)和子元素。 将鼠标悬停在子元素上时，父div 会扩展(就像它没有框大小属性一样)

.HTML：

<div class="wrap">
<button class="btn">Just hover me</button>  
</div>

.CSS：

.wrap{
width: 350px; 
background-color: #dedede;
position: relative;
padding: 20px 10px;
min-height: 70px;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn{
display: inline-block;
padding: 4px 15px;
border: 10px solid #cccccc;
background-color: #f6f6f6;
color: #333;
cursor: pointer;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn:hover{
border-color: #89bede;
background-color: #fff;
color: #137ebe;
}

但是在这种情况下有趣的时刻是，如果我只删除下一个属性之一，示例有效：

• 最小高度(换行)
• 溢出：隐藏(的 .wrap)
• 框大小(换行)
• 边框颜色(.btn：hover)(真的不知道为什么这个属性也会受到影响)

正如您可能建议的那样，我需要所有这些属性，并且不想删除其中任何一个。 那么，是否有一些解决方案可以使其在IE9-10中工作而无需删除属性？

示例在这里：http://jsfiddle.net/dpN3p/

Answer 1

我在今天的工作中也遇到了这个问题。这与父div 上的属性box-sizing一旦将鼠标悬停在子级上就会被忽略有关。

解决方案是将box-sizing更改为content-box(默认值)，并相应地调整min-height和width。由于content-box在height和width的基础上添加padding，因此必须手动从大小值中减去padding值。

.wrap {
width: 330px;
padding: 20px 10px;
min-height: 30px;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

这里的工作解决方案：http://jsfiddle.net/dpN3p/2/。