CODEWITHSUNDEEP
htmlcss
zhenetta
zhenetta

Reputation: 11

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

I have some css-rules that don't work correct in ie9-10. There is parent div (which has box-sizing:border-box) and child element. When hover on child element the parent div expands (like it 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 this case that if i delete just ONE of the next properties, example works:

As you may suggest i need all this properties and wouldn't like to delete any of them. So, is there some solution, that can make it work in IE9-10 without deleting properties?

example is here: http://jsfiddle.net/dpN3p/

Upvotes: 1

Views: 294

Answers (1)

Kanuea
Kanuea

Reputation: 341

I also came across this problem in my work today. It has to do with box-sizing property on the parent div being ignored once the child is hovered over.

The solution is to change the box-sizing to content-box (the default), and adjust the min-height and width accordingly. Since content-box adds padding on top of the height and width, padding values must be manually subtracted from your 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/.

Upvotes: 2

Related Questions