html - 使 'box-sizing:border-box' 在 IE9-10 中不起作用的 CssRules

Question

我有一些 css 规则在 ie9-10 中不能正常工作。 有父 div(具有 box-sizing:border-box)和子元素。 当悬停在子元素上时，父 div 会展开(就像它没有 box-sizing 属性一样)

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 的)
• box-sizing (of .wrap)
• border-color (of .btn:hover)(真的不知道为什么这个属性也会影响)

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

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

Answer 1

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

解决方法是将box-sizing改为content-box(默认)，并调整min-height 和相应的 width。 因为 content-box 在 height 和 之上添加了 padding code>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/ .