使'box-sizing：border-box'在IE9-10中不起作用的CSS規則

Question

我有一些CSS規則在ie9-10中無法正常工作。 有父div（具有box-sizing：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）
• 溢出：隱藏（.wrap）
• （.wrap）的框大小
• border-color（.btn：hover的）（真的不知道為什么這個屬性也會影響）

正如您可能建議的那樣，我需要所有這些屬性，並且不想刪除其中任何一個。 那么，有沒有什么解決方法可以使它在IE9-10中運行而又不刪除屬性？

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

Answer 1

我今天的工作中也遇到了這個問題。 一旦將鼠標懸停在父div上，它將與忽略其上的box-sizing屬性有關。

解決方案是將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/ 。