Solución al box-model en ie7 usando jQuery

Sé que hay soluciones hechas para este problema en particular, pero pesa 33k y solo necesitamos unas líneas como van a ver para lograr lo mismo…

Sabido es que a ie se la sudan los estándares y cuando los incorporan por lo general lo hacen taaarde.
La propiedad CSS “box-sizing” no es la excepción.

Ya sabemos que el siguiente CSS va a arreglar los desfases que se dan cuando un input que esta con un width:100%; dentro de un div que tiene un ancho fijado.

1
2
3
4
5
.elemento {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Y como comente en el post anterior, esta propiedad no está soportada en ie7.

Soluciones hay de todo tipo, pero lo cierto es que teniendo jQuery en todos mis desarrollos, se me hiso más que obvia la decisión de usar un script que arregle este bug en lugar de usar cosas más raras (archivos .htc por ejemplo).

Para implementar la solución solo necesitas poner este script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function () {
    if ($.browser.msie && ($.browser.version.substr(0, 1) == 7 || $("meta[content='IE=EmulateIE7']").length > 0)) {
        $(".ie7Fix-Box-model").each(function (i, v) {
            var el = $(v);
 
            //calculamos
            var pL = el.css("paddingLeft").replace("px", "") != "" ? el.css("paddingLeft").replace("px", "") : 0;
            var pR = el.css("paddingRight").replace("px", "") != "" ? el.css("paddingRight").replace("px", "") : 0;
            var bLW = el.css("borderLeftWidth").replace("px", "") != "" ? el.css("borderLeftWidth").replace("px", "") : 0;
            var bRW = el.css("borderRightWidth").replace("px", "") != "" ? el.css("borderRightWidth").replace("px", "") : 0;
            var newSize = el.width() - (parseInt(pL, 10) + parseInt(pR, 10) + parseInt(bLW, 10) + parseInt(bRW, 10));
 
            //le aplicamos el nuevo tamaño
            el.width(newSize);
        });
    }
});

Y ponerle la class “ie7Fix-Box-model” a todos los input que necesites arreglar.

Ver ejemplo (vean el codigo fuente)