html - CssRules that make 'box-sizing:border-box' not working in IE9-10 -

i have css-rules don't work correct in ie9-10. there parent div (which has box-sizing:border-box) , child element. when hover on child element parent div expands (like doesn't have box-sizing property)

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

but interesting moment in case if delete 1 of next properties, example works:

• min-height (of .wrap)
• overflow:hidden (of .wrap)
• box-sizing (of .wrap)
• border-color (of .btn:hover) (really don't know why property affects)

as may suggest need properties , wouldn't delete of them. so, there solution, can make work in ie9-10 without deleting properties?

example here: http://jsfiddle.net/dpn3p/

i came across problem in work today. has box-sizing property on parent div being ignored once child hovered over.

the solution change box-sizing content-box (the default), , adjust min-height , width accordingly. since content-box adds padding on top of height , width, padding values must manually subtracted size values.

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

working solution here: http://jsfiddle.net/dpn3p/2/.