Adds outer/innerHeight/Width methods to Zepto Adapted from https://gist.github.com/alanhogan/3935463

gistfile1.txt

(function($) {
    // Add inner and outer width to zepto (adapted from https://gist.github.com/alanhogan/3935463)
    var ioDim = function(dimension, includeBorder) {
        return function (includeMargin) {
            var sides, size, elem;
            if (this) {
                elem = this;
                size = elem[dimension]();
                sides = {
                    width: ["left", "right"],
                    height: ["top", "bottom"]
                };
                sides[dimension].forEach(function(side) {
                    size += parseInt(elem.css("padding-" + side), 10);
                    if (includeBorder) {
                        size += parseInt(elem.css("border-" + side + "-width"), 10);
                    }
                    if (includeMargin) {
                        size += parseInt(elem.css("margin-" + side), 10);
                    }
                });
                return size;
            } else {
                return null;
            }
        }
    };
    ["width", "height"].forEach(function(dimension) {
        var Dimension = dimension.substr(0,1).toUpperCase() + dimension.substr(1);
        $.fn["inner" + Dimension] = ioDim(dimension, false);
        $.fn["outer" + Dimension] = ioDim(dimension, true);
    });
})(Zepto);

Hey @wheresrhys

I think you should update Lines #15-17 to:

// Note the !, and the -
if (!includeBorder) {
    size -= parseInt(elem.css("border-" + side + "-width"), 10);
}

That's because the $(elem).width() and $(elem).height() functions already include the border-width in the returning value, so you want to subtract it instead of adding it.

@Goodwine:
This is not true my friend. Please check jQuery#width here: http://api.jquery.com/width/
Playing with the demo on the page will enlighten you :)

This polyfill doesn't support box-sizing.

How would I add support for box-sizing?