jQuery: emulare il box model CSS3 nei browser obsoleti

Nel caso in cui siate costretti a supportare browser obsoleti, potete usare la seguente soluzione per emulare il box model CSS3.

Possiamo implementare un plugin che aggiunge un contenitore interno ai box:

(function ( $ ) {
    $.fn.gutter = function ( options ) {

        var settings = {
            tag: "div",
            className: "gutter"
        };

        options = $.extend( settings, options );

        return this.each(function () {
            var $element = $( this ),
                element = $element[0];
            if ( element.firstChild.nodeType == 3 ) {
                var wrapper = "<" + options.tag + ' class="' + options.className + '"></' + options.tag + ">";
                $element.wrapInner( wrapper );
            }

        });

    };


})( jQuery );

Esempio d'uso:

$(function () {
    $( ".column" ).gutter();

});

Possiamo quindi definire i seguenti stili CSS:

.column {
	width: 33.33333%;
	float: left;
}

.gutter {
	padding: 0 20px;
}