Arreglo para el background-position en el IE
https://stackoverflow.com/questions/594870
-
09-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Me sale este problema en IE7 cuando se ejecuta una pieza de código que utiliza jQuery y jQuery plugins 2. El código funciona en FF3 y Chrome.
El error completo es:
Line: 33
Char: 6
Error: bg is null or not an object
Code: 0
URL: http://localhost/index2.html
Sin embargo la línea 33 es una línea en blanco.
Estoy usando 2: plugins que pueden arrastrarse y zoom. No importa lo que haga al código es siempre la línea 33 que tiene la culpa. Compruebo la fuente tiene la actualización a través de fuente de vista, pero me siento que esto podría estar mintiendo a mí.
<body>
<div id="zoom" class="zoom"></div>
<div id="draggable" class="main_internal"><img src="tiles/mapSpain-smaller.jpg" alt=""></div>
<script type="text/javascript">
$(document).ready(function() {
$('#draggable').drag();
$('#zoom').zoom({target_div:"draggable", zoom_images:new Array('tiles/mapSpain-smaller.jpg', 'tiles/mapSpain.jpg') });
});
</script>
</body>
Básicamente lo que estoy tratando de hacer es volver a crear el mapa de demostración pragmática Ajax con jQuery.
Al parecer, la segunda línea de este fragmento es la causa del problema:
bg = $(this).css('background-position');
if(bg.indexOf('%')>1){
Parece que se trata de seleccionar la propiedad background-position de #draggable y no encontrarlo? Adición manual de un background-position: 0 0; no solucionarlo. ¿Alguna idea sobre cómo solucionar este problema?
He intentado utilizar el MS depurador de guiones, pero que es casi inútil. No se puede inspeccionar variables o cualquier otra cosa.
Solución
Un poco más acerca de la excavación en el Interweb ha revelado la respuesta: IE no entiende el background-position selector. Se entiende la background-position-x y background-position-y no estándar.
Actualmente la piratería algo juntos para solucionar la misma.
uno de los buenos, de Redmond.
Otros consejos
Para moverse por el hecho de que Internet Explorer no admite el "background-position" atributo CSS, a partir de jQuery 1.4.3+ puede utilizar el . cssHooks objeto para normalizar este atributo entre los navegadores.
Para ahorrar un poco de tiempo, no es una posición de fondo plugin de jQuery disposición que permite a las "background-position" y "background-position-x / y" funcione como se esperaba en los navegadores que no soportan una o la otra de forma predeterminada.
Es interesante. IE8 no entiende backgroundPosition getter, pero entiende colocador.
$('.promo3').mousewheel(function(e,d){
var promo3 = $(this);
var p = promo3.css('backgroundPosition');
if (p === undefined) {
p = promo3.css('backgroundPositionX') + ' ' + promo3.css('backgroundPositionY');
}
var a = p.split(' ');
var y = parseInt(a[1]);
if (d > 0) {
if (y < -1107) y += 1107;
y -= 40;
}
else {
if (y > 1107) y -= 1107;
y += 40;
}
promo3.css('backgroundPosition', a[0] + ' ' + y + 'px');
return false;
});
Funciona muy bien en IE8 e IE8 vista compatibles.
Esto funcionó para mí:
if (navigator.appName=='Microsoft Internet Explorer')
{
bg = $(drag_div).css('backgroundPositionX') + " " + $(drag_div).css('backgroundPositionY');
}
else
{
bg = $(drag_div).css('background-position');
}
espero que lo hace por usted.
Es posible que desee comprobar para asegurarse de que está cargando los archivos js en el orden correcto para que las dependencias se tienen en cuenta.
Un poco de pensamiento (y una taza de té) más tarde se me ocurrió:
if(bg == 'undefined' || bg == null){
bg = $(this).css('background-position-x') + " " + $(this).css('background-position-y');
}
Desafortunadamente devuelve centro de centro a pesar de los recursos en línea que puedo encontrar el estado debe devolver 0 0 si los valores no están definidos.
empezando a preguntarse si hay una solución / solución real a este. Mucha gente ha tratado y todo lo que va a dejar atrapar todos los casos extremos.
El camelCase de backgroundPosition parece viable, pero no sé lo suficiente de jQuery para hacer una evaluación precisa de cómo ir sobre él - por lo que he leído sólo se puede utilizar como captadores camelCase si la propiedad se ha establecido previamente . Por favor, dime si estoy equivocado.
Sin embargo la línea 33 es una línea en blanco.
Será la línea 33 de uno de los archivos .js, no la línea 33 del propio HTML. IE no informa qué archivo real que el error fue vea la línea 33 de cada Js para algo ‘bg’.; en el peor de lo peor que puede empezar a insertar saltos de línea al comienzo de cada Js y ver si el número de cambios de línea.
verifico la fuente tiene la actualización a través de fuente de vista, pero me siento que esto podría estar mintiendo a mí.
Ver código fuente siempre le mostrará lo que IE consiguió del servidor. No mostrará las actualizaciones al DOM.
tratar backgroundPosition Istead
Además, asegúrese de que 'esto' existe y que su solicitud para un atributo devuelve un valor. IE lanzará este tipo de errores cuando intenta llamar a un método en una propiedad que no existe, por lo tanto, bg es nulo o nulo un objeto. si no se preocupan por el IE se puede hacer bg = $ (this) ... || '' De manera que siempre hay algo referenciados.
Además, no relacionado con el error que está recibiendo, pero es el valor del índice de 1 correcta? Quiso decir -1?
Yupp,
Trate background-position lugar o simplemente ajustar la posición de fondo con jQuery antes de llamar. Ill una conjetura a menudo conoce las posiciones a través de CSS antes de llamar. Se isnt bastante, pero de alguna manera lo hizo el truco para mí.)
por ejemplo:
//set it in with javascript.
$("someid").css("background-position", "10px 0");
...
//do some funky stuff
//call it
$("someid").css("background-position");
//and it would return "10px 0" even in IE7
Si nada ayuda, también es posible hacer el siguiente truco.
Podemos reemplazar un fondo de un elemento por un elemento interior con posición absoluta (con el mismo fondo). Las coordenadas serán reemplazadas por las propiedades left y top. Esto funciona en todos los navegadores.
Para una mejor comprensión, por favor, compruebe el código:
Antes
<div></div>
div {
background: url(mySprite.png);
background-position: -100px 0;
}
Después
<div>
<span></span>
</div>
div {
position: relative;
overflow: hidden;
width: 100px; /* required width to show a part of your sprite */
height: 100px; /* required height ... */
}
div span {
position: absolute;
left: -100px; /* bg left position */
top: 0; /* bg top position */
display: block;
width: 500px; /* full sprite width */
height: 500px; /* full sprite height */
background: url(mySprite.png);
}
Esta solución no es muy flexible, pero me ayudó para mostrar los iconos de estado revolotean correctamente.
No se puede utilizar guiones en la función jQuery css. Tienes que hacerlo en camelCase:
.css('backgroundPosition') o .css('backgroundPositionX') y .css('backgroundPositionY') para IE
