Fix per background-position in IE

StackOverflow https://stackoverflow.com/questions/594870

Domanda

ho questo problema in IE7 durante l'esecuzione di un pezzo di codice che utilizza jQuery e jQuery plugin 2. Il codice funziona in FF3 e Chrome.

L'errore completo è: 

Line: 33 
Char: 6 
Error: bg is null or not an object 
Code: 0 
URL: http://localhost/index2.html

Tuttavia linea 33 è una riga vuota.

Sto usando 2 plugin: trascinabili e lo zoom. Non importa quello che faccio al codice è sempre la linea 33 che è in difetto. Posso controllare la fonte ha aggiornamento tramite sorgente di vista ma mi sento questo potrebbe mentire a me. 

<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>

In sostanza quello che sto cercando di fare è ricreare la Prammatica Ajax mappa demo con jQuery.

Sembrerebbe che la seconda linea di questo frammento è la causa del problema: 

bg = $(this).css('background-position');                    
if(bg.indexOf('%')>1){

Sembra si stia tentando di selezionare la proprietà background-position di #draggable e non trovarlo? Aggiunta manuale di un background-position: 0 0; non risolvere il problema. Tutte le idee su come risolvere questo problema?

Ho provato ad utilizzare MS Script Debugger ma che è quasi inutile. Non può ispezionare variabili o qualsiasi altra cosa.

È stato utile?

Soluzione

Un po 'più a scavare circa sul Interweb ha rivelato la risposta: IE non capisce il background-position selettore. Si capisce il background-position-x non standard e background-position-y.

Al momento l'hacking qualcosa insieme per aggirare esso.

Nice one, Redmond.

Altri suggerimenti

Per aggirare il fatto che Internet Explorer non supporta l'attributo CSS "background-position", come di jQuery 1.4.3+ è possibile utilizzare il . oggetto cssHooks " = rel" per normalizzare questo attributo tra i browser.

Per risparmiare tempo, c'è un posizione sfondo plugin jQuery disposizione che consente sia "background-position" e "background-position-x / y" a funzionare come previsto nei browser che non supportano uno o l'altro di default.

E 'interessante. IE8 non capisce getter backgroundPosition, ma capisce setter. 

$('.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;
});

E le grandi opere in vista compatibile IE8 e IE8.

Questo ha funzionato per me: 

    if (navigator.appName=='Microsoft Internet Explorer')
   {
    bg = $(drag_div).css('backgroundPositionX') + " " + $(drag_div).css('backgroundPositionY');
   }
   else
   {
    bg = $(drag_div).css('background-position');
   }

spero che fa per voi.

Si consiglia di controllare per assicurarsi che si sta caricando i file js nell'ordine corretto in modo che tutte le dipendenze sono presi in considerazione.

Un po 'di pensiero (e una tazza di tè) dopo mi si avvicinò con: 

if(bg == 'undefined' || bg == null){
    bg = $(this).css('background-position-x') + " " + $(this).css('background-position-y');
}

Purtroppo restituisce Centro nonostante le risorse on-line che posso trovare lo stato dovrebbe restituire 0 0 se i valori non sono definiti.

Comincio a chiedermi se c'è una reale soluzione / soluzione a questo. Un sacco di persone hanno provato e tutti finora non riescono a catturare tutti i casi limite.

La versione camelCase di backgroundPosition sembra praticabile, ma non so abbastanza di jQuery per fare una valutazione accurata di come andare a questo proposito - da quello che ho letto è possibile utilizzare solo camelCase come getter se la proprietà è stata impostata in precedenza . Ti prego, dimmi se mi sbaglio.

  

Tuttavia linea 33 è una riga vuota.

Sarà la linea 33 di uno dei file .js, non linea 33 del codice HTML stesso. IE non riesce a segnalare che il file vero e proprio l'errore è stato in Guardate linea 33 di ogni .js per qualcosa di ‘bg.’; se il peggio arriva al peggio si può iniziare a inserire nuove righe all'inizio di ogni .js e vedere se il numero di linea cambia.

  

Controllo la sorgente ha aggiornamento tramite visualizza sorgente ma sento che questo potrebbe essere mentendo.

Visualizza sorgente sarà sempre mostrare ciò che IE ha ottenuto dal server. Non mostrerà alcun aggiornamento al DOM.

provare backgroundPosition istead

Inoltre, assicurarsi che 'questo' esiste e che la sua richiesta di un attributo restituisce un valore. IE lanciare questo tipo di errori quando si tenta di chiamare un metodo su una proprietà che non esiste, quindi bg è nullo o null un oggetto. se non si cura di IE si può fare bg = $ (this) ... || '' In modo tale che c'è sempre qualcosa di riferimento.

Inoltre, estranei a l'errore che stai ricevendo, ma è il vostro valore di indice di 1 corretta? Forse cercavi -1?

Yupp,
Try background-position invece o semplicemente impostare il background-position con jQuery prima di chiamare esso. Ill indovinare uno spesso conosce le posizioni attraverso CSS prima di chiamare esso. Si mangia abbastanza, ma in qualche modo lo ha fatto il trucco per me.)

es: 

//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

se non aiuta, è anche possibile fare il trucco seguente.

Possiamo sostituire uno sfondo di un elemento da un elemento posizionato in modo assoluto interno (con lo stesso sfondo). Le coordinate saranno sostituiti da left e top proprietà. Questo funziona in tutti i browser.

Per una migliore comprensione, si prega di verificare il codice:

Prima 

<div></div>

div {
  background: url(mySprite.png);
  background-position: -100px 0;
}

Dopo 

<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);
}

Questa soluzione non è molto flessibile, ma mi ha aiutato a mostrare le icone librarsi stato correttamente.

Non è possibile utilizzare trattini nella funzione jquery css. Bisogna farlo in camelCase: .css('backgroundPosition') o .css('backgroundPositionX') e .css('backgroundPositionY') per IE

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top