使“框大小:边框”无法在IE9-10中工作的CssRules

Question

我有一些css规则在ie9-10中不正确。有父div (它有方框大小:边框框)和子元素。当在子元素上悬停时，父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)
• 溢出:隐藏( .wrap)
• 箱形尺寸( .wrap)
• 边框颜色( .btn:hover) (真的不知道为什么这个属性也会影响)

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

示例如下：http://jsfiddle.net/dpN3p/

Answer 1

我在今天的工作中也遇到了这个问题。这与父div上的box-sizing属性有关，当子节点悬停时，该属性将被忽略。

解决方案是将box-sizing 更改为 content-box (默认值)，并调整 min-height 和 width accordingly.，因为content-box在height和width之上添加了padding和width，padding值必须从您的大小值中手动减去。

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

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