Simple box-sizing: border-box; fallback for IE7

Box-sizing: border-box; is awesome. If you are unfamiliar with this CSS property, check out this great article at CSS-Tricks that covers it in more detail.

In this example we implement box-sizing: border-box; to any element with a .boxSized class and all child elements of that class (to disable box-sizing: border-box; on any element use box-sizing: content-box;):

.boxSized, .boxSized * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Like many other ‘new’ CSS3 layout features, it can often times be missed or ignored by developers looking to produce cross-browser friendly code.

Yet unlike most other exciting CSS3 layout properties, box-sizing comes with GREAT browser support. ( http://caniuse.com/#search=box-sizing ) Works like a charm in just about every browser out there but IE7.

However, since we still support many IE7 users, we need a fallback.

Fallback Methods

  1. Surely there must be a polyfill? There is: https://github.com/Schepp/box-sizing-polyfill
  2. Of course some sites are already heavily reliant on JavaScript and any lighter alternative is always welcome. With the help of Modernizr, we can make a simple box-sizing fallback for IE7.As of this writing, Modernizr does not test for box-sizing or have it as a build option in their CSS3 support. However, Modernizr is easily extendable. We can make it check for box-sizing like this:
    Modernizr.addTest("boxsizing", function() {
    	return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
    });
    

    Source: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css-boxsizing.js

    Once Modernizr support is added, we can check to see if our document has been assigned the class of ‘boxsizing’. If it hasn’t, we can correct broken widths with just a few lines of jQuery:

    $(function(){
    	if( !($('html').hasClass('boxsizing')) ){
    		$('.boxSized, .boxSized *').each(function(){
    			var fullW = $(this).outerWidth(),
    				actualW = $(this).width(),
    				wDiff = fullW - actualW,
    				newW = actualW - wDiff;
    
    			$(this).css('width',newW);
    		});
    	}
    });
    

    This fallback example is very simple and only really applies to widths. For any browser that fails the Modernizr check, we calculate the difference between the width() and outerWidth() of each element we’ve applied box-sizing: border-box; to. We subtract that result from the element’s width() and apply it as a new width value.

    Using this on major layout elements can greatly simplify our workflow as it allows us to avoid using extra markup and classes to accommodate the regular box-model we are all used to.

Click here for a demo.

10 thoughts on “Simple box-sizing: border-box; fallback for IE7

  1. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). ‘..

    Catch you later
    <http://www.caramoan.co

  2. I’m trying to implement this method on my website (http://www.smorecreative.com) and the body class aspect is working but it is not adding the boxSized class to any elements that use box-sizing property, or anywhere for that matter. And in an attempt to further test, I manually added .box-sized to some elements on my about page, and the calculations were not done. Am I missing something? :/

  3. Good point Adi, Maybe it wouldn’t be so bad on smaller sites but yes, some CMS ‘s are known for outputting large amounts of elements meaning that inline styles would get applied to maybe hundreds of block elements. It’s actually for this reason that I went with a ‘.boxSized’ class in my example. Definitely something to look out for.

  4. Nice article, i really enjoyed the jQuery fallback (htcs are often unpredictable and are likely to complicate things more than resolving). And thanks for the integration Abban, I was just looking for it!

    Just a little detail: after adding the custom test on Modernizer, instead of !$(‘html’).hasClass(‘boxsizing’) you can use

    if(!Modernizr.boxsizing){
    /* etc */
    }

    or if you’re using Modernizr.load (yepnope), you can move the fallback to an external file:
    Modernizr.load([{ test : Modernizr.boxsizing , nope : 'box-sizing-fallback.js' }]);

  5. Very interesting, did not know you can check for block elements that way. Thanks for the tip! This would also be helpful for dealing with layout elements.

  6. Nice, I was looking for an easy solution for this. If you’re using *{box-sizing:border-box;} in your CSS you could also select all block level elements like:

    if(!($('html').hasClass('boxsizing'))){
    	$('*').each(function(){
    		if($(this).css('display')=='block'){
    			var f, a, n;
    			f = $(this).outerWidth();
    			a = $(this).width();
    			n = a-(f-a);
    			$(this).css('width', n);
    		}
    	});
    }
    

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>