js-header

jQuery: .css(“background-position”) falla en Internet Explorer

Me iba a poner a explicar porque falla y todo lo que tuve que hacer hasta darme cuenta del problema y la forma de solucionarlo, pero prefiero por esta vez simplemente dejarles la función que hice para arreglar el problema:

El siguiente método se acopla a jQuery por lo que lo pueden cargar justo después de jQuery y usarlo normalmente.

Y como mencione, el uso es bastante sencillo.

Para cerrar el post el problema en resumen es que internet explorer no reconoce la propiedad “background-position” del metodo .css(). En su lugar hay que usar “background-position-x” y “background-position-y

Y una cosita mas: el método solo funciona con pixeles porque es lo que me hacía falta, porcentajes y demases yerbas quedan excluidas salvo que alguien quiera aportar esa parte 😉

Descargar ejemplo

3 Comments

  • miguel valero 03/04/2011

    He visto que desde IE9 este problema sigue, en fin porque será que este navegador siempre da problemas, ah si será porque no respeta los éstándares. Bueno en todo caso muchas gracias por tu aporte, es de utilidad. Saludos!

  • Gabriel Agudelo 03/10/2012

    En IE se debe dividir la posición obtenida por 8 es decir:

    $.browser.msie ? [xPosition = parseInt($(“#muestras”).css(bgp + “-x”).split(” “)[0]) / 8, yPosition = parseInt($(“#muestras”).css(bgp + “-y”).split(” “)[0]) / 8] :
    [xPosition = parseInt($(“#muestras”).css(bgp).split(” “)[0]), yPosition = parseInt($(“#muestras”).css(bgp).split(” “)[1])];

    Espero les sirva!

  • Eduardo 07/06/2013

    Existe una forma mas fácil de poder burlar este error de nuestro antagonista IE y es la siguiente: el primer argumento del metodo css() debe ser solamente ‘background’ y el segundo, la posicion en top – left – right – bottom, según corresponda. Ejemplo: $(this).css(‘background-position’,’top left’);

:).