IE7中的自举边框问题

Question

I'm using Bootstrap's responsive grid to layout an HTML page. Though the form looks perfect in Chrome, in IE7, when I use a border, the box model will jump down in the fluid.

Example:

HTML:

<div class="row-fluid">
    <div class="box span3"></div>
    <div class="box span3"></div>
    <div class="box span3"></div>
    <div class="box span3"></div>
</div>

CSS:

.box{
   border:5px solid red;
}

This HTML and CSS works fine in Chrome, Firefox, IE 8, 9, and 10.

Why, in IE7 does the last span jump down?

I know this is an IE bug with box model, do you have any idea on how to fix it?

Answer 1

add this script in page for IE 7

 <!--[if IE 7]>
<style>
    .row-fluid .span3{
        width:22.80% !important;
    }
</style>
<![endif]-->