box-sizing: border-box and IE7

Internet Explorer 7 doesn’t support box-sizing: border-box. You can, however, achieve the same thing with nested divs.

Replace

<div class="border-box">

    ... content ...

</div>
.border-box {
    box-sizing: border-box;
    width: 50%;
    font-size: 50%;
    margin-bottom: 0.5em;
    background: green;
    padding: 5em;
    border: 5px solid red;
    overflow: hidden;
}

with

<div class="border-boxish">
    <div class="border-boxish-inner">

        ... content ...

    </div>
</div>
.border-boxish {
    width: 50%;
    font-size: 50%;
    margin-bottom: 0.5em;
    background: green;
}

.border-boxish-inner {
    padding: 5em;
    border: 5px solid red;
    overflow: hidden;
}

You don’t need to use all css-rules from the example. I just included them to show what goes where.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>