IE7 - box-sizing not working even for fixed width element

Question

I have a div in my layout which has box-sizing property assigned to it with value border-box. It works good in other browsers but does not work in IE7. I have read that for fixed width elements, it works. The IE developer tool tells that box-sizing property is assigned correctly. The CSS code:

.item {
    width:360px;
    background:#FFFFFF;
    border:0;
    border-bottom:1px solid #DDDDDD;
    padding:12px 24px;
    margin-bottom:24px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

It breaks the layout.

IE7 does not support `box-sizing` - period. IE7 does not even have developer tools. Where did you get that information from? — BoltClock, Mar 20 '14 at 11:31
http://stackoverflow.com/questions/2909667/box-sizing-support-in-ie7 — James, Mar 20 '14 at 11:31
Already answered..this question is duplicate http://stackoverflow.com/questions/2909667/box-sizing-support-in-ie7 — Jot Dhaliwal, Mar 20 '14 at 11:32
@BoltClock I read it yesterday when I was searching the web for fix. If it does not support then why it does not show it in console? — Muhammed Talha Akbar, Mar 20 '14 at 11:36

score 0 · Accepted Answer · answered Mar 20 '14 at 11:33

0

Unfortunately IE7 doesn't support box-model: border-box and uses the W3C content box model instead. There are a couple of options here - use a polyfil or write specific IE7 rules in a conditional comment.

answered Mar 20 '14 at 11:33

David Randall

770
3
9

Content box model, not padding box model. – BoltClock Mar 20 '14 at 11:34

IE7 - box-sizing not working even for fixed width element

1 Answers1