├── README.markdown
├── borderBoxModel-min.js
└── borderBoxModel.js


/README.markdown:
--------------------------------------------------------------------------------
 1 | # Border-box model support for Internet Explorer 6-7
 2 | 
 3 | One of the new, shiny CSS3 proprieties that you can start using today is `box-sizing`.
 4 | This propriety allows you to switch between box models.
 5 | 
 6 | As of today, the browser support is really wide and this propriety works on:
 7 | 
 8 | - Firefox 1+ (with the `-moz` prefix)
 9 | - Safari 3+ (with the `-webkit` prefix)
10 | - Opera 8.5+
11 | - Internet Explorer 8+
12 | 
13 | This script will enable the `border-box` model also in IE6 and IE7 without trigger the *Quirks Mode*.
14 | 
15 | # Basic usage
16 | 
17 | The function has no dependency, just put the minified version of the script at the bottom of the page, before the `</body>`, so it will be lauched as soon as possible.
18 | To be sure that it is executed only if the version of IE is prior to 8, use the conditional comments:
19 | 
20 |     <!--[if lt IE 8 ]>
21 |     <script>
22 |         var borderBoxModel = ...
23 |     </script>
24 |     <![endif]-->
25 | 
26 | # Known issues and limitations
27 | 
28 | - Currently it works only if padding and border are set in `px`.
29 | - Width and height are written inline, so no fluid behaviour (es. onresize, min/max-width,...)
30 | - Probably it needs more tests with complex layouts (with negative margins, ...)
31 | 
32 | # More info
33 | 
34 | Read my article about the [CSS3 box-sizing propriety](http://albertogasparin.it/)
35 | 


--------------------------------------------------------------------------------
/borderBoxModel-min.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Add support fo CSS3 box-sizing: border-box model for IE6 and IE7
 3 |  * 
 4 |  * @author Alberto Gasparin http://albertogasparin.it/
 5 |  * @version 1.1, License MIT
 6 |  * 
 7 |  **/
 8 | 
 9 | var borderBoxModel=function(l,d){function m(){e=parseInt(b.width,10)||parseInt(a.width,10);f=parseInt(b.height,10)||parseInt(a.height,10);if(e){var c=parseInt(b.borderLeftWidth||a.borderLeftWidth,10)||0,g=parseInt(b.borderRightWidth||a.borderRightWidth,10)||0,h=parseInt(b.paddingLeft||a.paddingLeft,10),i=parseInt(b.paddingRight||a.paddingRight,10);if(c=c+h+i+g)a.width=e-c}if(f){c=parseInt(b.borderTopWidth||a.borderTopWidth,10)||0;g=parseInt(b.borderBottomWidth||a.borderBottomWidth,10)||0;h=parseInt(b.paddingTop||a.paddingTop,10);i=parseInt(b.paddingBottom||a.paddingBottom,10);if(c=c+h+i+g)a.height=f-c}}for(var j,b,a,e,f,k=0,n=l.length;k<n;k++){j=l[k];a=j.style;b=j.currentStyle;if(a.boxSizing==d||a["box-sizing"]==d||b.boxSizing==d||b["box-sizing"]==d)try{m()}catch(e){}}}(document.getElementsByTagName("*"),"border-box");
10 | 


--------------------------------------------------------------------------------
/borderBoxModel.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Add support fo CSS3 box-sizing: border-box model for IE6 and IE7
 3 |  * 
 4 |  * @author Alberto Gasparin http://albertogasparin.it/
 5 |  * @version 1.1, License MIT
 6 |  * 
 7 |  **/
 8 | 
 9 | var borderBoxModel = (function(elements, value) {
10 |   var element, cs, s, width, height;
11 |   
12 |   // cicle through all DOM elements
13 |   for (var i=0, max=elements.length; i < max; i++) {
14 |     element = elements[i];
15 |     s = element.style;
16 |     cs = element.currentStyle;
17 |     
18 |     // check if box-sizing is specified and is equal to border-box
19 |     if(s.boxSizing == value || s["box-sizing"] == value
20 |        || cs.boxSizing == value || cs["box-sizing"] == value) {
21 |       
22 |       // change width and height
23 |       try {
24 |         apply();
25 |       } catch(e) {}
26 |     }
27 |   }
28 |   
29 |   function apply() {
30 |     
31 |     width = parseInt(cs.width, 10) || parseInt(s.width, 10);
32 |     height = parseInt(cs.height, 10) || parseInt(s.height, 10);
33 |     
34 |     // if width is declared (and not 'auto','',...)
35 |     if(width) {
36 |       
37 |       var // border value could be 'medium' so parseInt returns NaN
38 |           borderLeft = parseInt(cs.borderLeftWidth || s.borderLeftWidth, 10) || 0,
39 |           borderRight = parseInt(cs.borderRightWidth || s.borderRightWidth, 10) || 0,
40 |           
41 |           paddingLeft = parseInt(cs.paddingLeft || s.paddingLeft, 10),
42 |           paddingRight = parseInt(cs.paddingRight || s.paddingRight, 10),
43 |           
44 |           horizSum = borderLeft + paddingLeft + paddingRight + borderRight;
45 |       
46 |       // remove from width padding and border two times if != 0
47 |       if(horizSum) {
48 |         s.width = width - horizSum; //width ? width - horizSum * 2 : styleWidth - horizSum;
49 |       }
50 |     }
51 |     
52 |     // if height is declared (and not 'auto','',...)
53 |     if(height) {
54 |       
55 |       var // border value could be 'medium' so parseInt returns NaN
56 |           borderTop = parseInt(cs.borderTopWidth || s.borderTopWidth, 10) || 0,
57 |           borderBottom = parseInt(cs.borderBottomWidth || s.borderBottomWidth, 10) || 0,
58 |           
59 |           paddingTop = parseInt(cs.paddingTop || s.paddingTop, 10),
60 |           paddingBottom = parseInt(cs.paddingBottom || s.paddingBottom, 10),
61 |           
62 |           vertSum = borderTop + paddingTop + paddingBottom + borderBottom;
63 |       
64 |       // remove from height padding and border two times if != 0
65 |       if(vertSum) {
66 |         s.height = height - vertSum; //height ? height - vertSum * 2 : styleHeight - vertSum;
67 |       }
68 |     }
69 |   }
70 |   
71 | })(document.getElementsByTagName('*'), 'border-box');


--------------------------------------------------------------------------------