Correction de la position d'arrière-plan dans IE
https://stackoverflow.com/questions/594870
-
09-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'obtiens ce problème dans IE7 lors de l'exécution d'un morceau de code qui utilise jquery et 2 plugins jquery.Le code fonctionne dans FF3 et Chrome.
L'erreur complète est :
Line: 33
Char: 6
Error: bg is null or not an object
Code: 0
URL: http://localhost/index2.html
Cependant la ligne 33 est une ligne vide.
J'utilise 2 plugins :déplaçable et zoom.Peu importe ce que je fais avec le code, c'est toujours la ligne 33 qui est en faute.Je vérifie que la source est mise à jour via View Source mais je pense que cela pourrait me mentir.
<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>
Essentiellement, ce que j'essaie de faire est de recréer la démo de la carte Pragmatic Ajax avec jQuery.
Il semblerait que la deuxième ligne de cet extrait soit à l'origine du problème :
bg = $(this).css('background-position');
if(bg.indexOf('%')>1){
Il semble essayer de sélectionner la propriété background-position de #draggable et je ne le trouve pas ?Ajouter manuellement un background-position: 0 0; Je ne l'ai pas réparé.Des idées sur la façon de contourner ce problème ?
J'ai essayé d'utiliser MS Script Debugger mais c'est presque inutile.Je ne peux pas inspecter les variables ou quoi que ce soit d'autre.
La solution
Un peu plus au sujet de creuser sur le Interweb a révélé la réponse: IE ne comprend pas le sélecteur background-position. Il comprend la background-position-x non standard et background-position-y.
hacking actuellement quelque chose ensemble pour contourner ce.
Nice one, Redmond.
Autres conseils
Pour contourner le fait qu'Internet Explorer ne prend pas en charge l'attribut CSS "background-position", depuis jQuery 1.4.3+, vous pouvez utiliser l'attribut .cssHooks objet pour normaliser cet attribut entre les navigateurs.
Pour gagner du temps, il existe un plugin jQuery de position d'arrière-plan disponible qui permet à la fois "background-position" et "background-position-x/y" de fonctionner comme prévu dans les navigateurs qui ne prennent pas en charge l'un ou l'autre par défaut.
Il est intéressant. IE8 ne comprend pas getter backgroundPosition, mais il comprend 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;
});
Il fonctionne très bien en mode compatible IE8 et IE8.
Cela a fonctionné pour moi:
if (navigator.appName=='Microsoft Internet Explorer')
{
bg = $(drag_div).css('backgroundPositionX') + " " + $(drag_div).css('backgroundPositionY');
}
else
{
bg = $(drag_div).css('background-position');
}
espère que cela fait pour vous.
Vous pouvez vérifier pour vous assurer que vous chargez vos fichiers js dans l'ordre correct de telle sorte que toutes les dépendances sont prises en compte.
Un peu de réflexion (et une tasse de thé) plus tard je suis venu avec:
if(bg == 'undefined' || bg == null){
bg = $(this).css('background-position-x') + " " + $(this).css('background-position-y');
}
Malheureusement, il retourne centre central malgré les ressources en ligne que je peux trouver l'état, il doit retourner 0 0 si les valeurs ne sont pas définies.
commence à me demander s'il y a une solution / solution réelle à ce sujet. Beaucoup de gens ont essayé et tous si loin pour ne pas attraper tous les cas limites.
La version camelCase de backgroundPosition semble viable, mais je ne sais pas assez de jQuery pour faire une évaluation précise de la façon d'aller à ce sujet - de ce que j'ai lu, vous ne pouvez utiliser camelCase comme getters si la propriété a été précédemment défini . S'il vous plaît me dire si je me trompe.
Cependant la ligne 33 est une ligne blanche.
Ce sera la ligne 33 d'un de vos fichiers .js, pas la ligne 33 du code HTML lui-même. IE ne parvient pas à signaler quel fichier réel l'erreur était dans le regard à la ligne 33 de chaque .js pour quelque chose sur « bg ». si le pire arrive au pire, vous pouvez commencer à insérer des sauts de ligne au début de chaque .js et voir si le numéro de ligne change.
Je vérifie la source a mise à jour via la source de vue, mais je pense que ce pourrait être me mentir.
Voir la source de toujours vous montrer ce que IE a du serveur. Il ne montrera pas toutes les mises à jour du DOM.
essayez backgroundPosition istead
En outre, assurez-vous que « ceci » existe et que votre demande d'un attribut renvoie une valeur. IE lancer ce genre d'erreurs lorsque vous essayez d'appeler une méthode sur une propriété qui n'existe pas, donc bg est nulle ou null un objet. si vous ne se soucient IE que vous pouvez faire bg = $ (this) ... || '' Afin que Theres toujours quelque chose référencé.
En outre, sans rapport avec l'erreur que vous obtenez, mais votre valeur d'index de 1 correcte? Vouliez-vous dire -1?
Yupp,
Essayez background-position à la place ou tout simplement définir la position arrière-plan avec jquery avant de l'appeler. Ill guess connaît souvent les positions par CSS avant de l'appeler. Il nest pas assez, mais en quelque sorte, il a fait l'affaire pour moi.)
par exemple:
//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 rien ne permet, il est également possible de faire le tour suivant.
On peut remplacer par un élément intérieur en position absolue (avec le même arrière-plan) un fond d'un élément. Les coordonnées seront remplacées par des propriétés de left et top. Cela fonctionne dans tous les navigateurs.
Pour une meilleure compréhension, s'il vous plaît, vérifiez le code:
Avant
<div></div>
div {
background: url(mySprite.png);
background-position: -100px 0;
}
Aprè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);
}
Cette solution est très flexible, mais il m'a aidé à montrer les icônes planent état correctement.
Vous ne pouvez pas utiliser des tirets dans la fonction css jquery. Vous devez le faire en camelCase:
.css('backgroundPosition') ou .css('backgroundPositionX') et .css('backgroundPositionY') pour IE
