Responsive CSS grid that doesn't rely on box-sizing - css

Question

I tried to search for an answer to this both within Google, and on this website.
I have a website that needs to be made responsive. It's relatively intricate, but it's definitely possible with the design we currently have.
My question is this. Is there a responsive grid system, or an example of a fully responsive grid system that does NOT rely on box-sizing: border-box. After looking at Pure & Bootstrap, it seems both rely on that property to make it work.
When thinking about it in practice, it seems to me that a box-sizing:border-box model would be required to allow the use of percentages appropriately.
Why am I unable to use this method? Support of IE7 is absolutely required for this project. I know there are polyfills and htc files that can be used to force support, however, the scale and size of this site makes these options hard to implement. From what I've read, these options should be used in moderation, and a site of this caliber, it just couldn't be used in moderation.
Thanks.

Answer 1

In Twitter Bootstrap 3 you can remove the box-sizing in line 293.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Just remove this and in input declaration :)

Answer 2

Here is an example of the Bootstrap 2.3.x grid only using it mobile first, it kicks in at the 768 min width, you can change this value. To get this to be seen by IE7 and IE8 use Respond.js and make sure you read their docs. Basically you need to locally link (relative path) to the CSS for Respond.js.
This does not rely on box-sizing:border-box.
#media (min-width: 768px) {
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.row {
width: 100%;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after { clear: both }
.row [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
float: left;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
}
.row [class*="span"]:first-child { margin-left: 0 }
[class*="span"].pull-right,
.row [class*="span"].pull-right { float: right }
.row .span12 { width: 100% }
.row .span11 { width: 91.43646408839778% }
.row .span10 { width: 82.87292817679558% }
.row .span9 { width: 74.30939226519337% }
.row .span8 { width: 65.74585635359117% }
.row .span7 { width: 57.18232044198895% }
.row .span6 { width: 48.61878453038674% }
.row .span5 { width: 40.05524861878453% }
.row .span4 { width: 31.491712707182323% }
.row .span3 { width: 22.92817679558011% }
.row .span2 { width: 14.3646408839779% }
.row .span1 { width: 5.801104972375691% }
.row .offset12 { margin-left: 105.52486187845304% }
.row .offset12:first-child { margin-left: 102.76243093922652% }
.row .offset11 { margin-left: 96.96132596685082% }
.row .offset11:first-child { margin-left: 94.1988950276243% }
.row .offset10 { margin-left: 88.39779005524862% }
.row .offset10:first-child { margin-left: 85.6353591160221% }
.row .offset9 { margin-left: 79.8342541436464% }
.row .offset9:first-child { margin-left: 77.07182320441989% }
.row .offset8 { margin-left: 71.2707182320442% }
.row .offset8:first-child { margin-left: 68.50828729281768% }
.row .offset7 { margin-left: 62.70718232044199% }
.row .offset7:first-child { margin-left: 59.94475138121547% }
.row .offset6 { margin-left: 54.14364640883978% }
.row .offset6:first-child { margin-left: 51.38121546961326% }
.row .offset5 { margin-left: 45.58011049723757% }
.row .offset5:first-child { margin-left: 42.81767955801105% }
.row .offset4 { margin-left: 37.01657458563536% }
.row .offset4:first-child { margin-left: 34.25414364640884% }
.row .offset3 { margin-left: 28.45303867403315% }
.row .offset3:first-child { margin-left: 25.69060773480663% }
.row .offset2 { margin-left: 19.88950276243094% }
.row .offset2:first-child { margin-left: 17.12707182320442% }
.row .offset1 { margin-left: 11.32596685082873% }
.row .offset1:first-child { margin-left: 8.56353591160221% }
}/* end min-width */