إصلاح موقف الخلفية في IE

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

سؤال

أحصل على هذه المشكلة في IE7 عند تشغيل جزء من التعليمات البرمجية التي تستخدم مسافات JQuery و 2 JQuery Plugins. يعمل الرمز في FF3 وكروم.

الخطأ الكامل هو:

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

ومع ذلك Line 33 هو خط فارغ.

أنا أستخدم 2 إضافات: draggable والتكبير. بغض النظر عن ما أقوم به للرمز هو دائما خط 33 على خطأ. أتحقق من المصدر لديه تحديث عبر مصدر العرض ولكني أشعر أن هذا قد يكون مستلقا لي.

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

أساسا ما أحاول القيام به هو إعادة تعيين خريطة Pragmatic Ajax Demo مع JQuery.

يبدو أن السطر الثاني من هذا المقتطف يسبب المشكلة:

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

يبدو أنه يحاول تحديد خاصية موقف الخلفية #draggable وعدم العثور عليه؟ إضافة أ background-position: 0 0; لم إصلاحه. أي أفكار حول كيفية التجول في هذه المشكلة؟

حاولت استخدام عصابات MS Script Debugger ولكنها غير مجدية تقريبا. لا يمكن فحص المتغيرات أو أي شيء آخر.

هل كانت مفيدة؟

المحلول

كشفت أكثر قليلا عن interweb عن الإجابة: أي لا يفهم المحدد background-position. وبعد وهو يفهم غير القياسية background-position-x و background-position-y.

حاليا اختراق شيء معا لتحمله.

واحد لطيف، ريدموند.

نصائح أخرى

للوصول إلى حقيقة أن Internet Explorer لا يدعم سمة CSS "موضع الخلفية"، اعتبارا من jQuery 1.4.3+ يمكنك استخدام .csshooks. الاعتراض على تطبيع هذه السمة بين المتصفحات.

لإنقاذ نفسك بعض الوقت، هناك موقف خلفية مسج البرنامج المساعد يتيح ذلك يسمح بكل من "موضع الخلفية" و "موضع الخلفية-X / Y" للعمل كما هو متوقع في المتصفحات التي لا تدعم واحدة أو أخرى افتراضيا.

إنه للاهتمام. لا يفهم IE8 الخلفية Getter، لكنه يفهم STERTER.

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

إنه يعمل بشكل رائع في عرض IE8 و IE8 متوافق.

هذا عملت بالنسبة لي:

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

آمل أن يفعل لك.

قد ترغب في التحقق للتأكد من أنك تقوم بتحميل ملفات JS الخاصة بك بالترتيب الصحيح بحيث يتم أخذ أي تبعيات في الاعتبار.

قليلا من التفكير (وكوب من الشاي) في وقت لاحق توصلت مع:

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

لسوء الحظ، ترجع مركز المركز على الرغم من الموارد عبر الإنترنت، يمكنني العثور على الدولة التي يجب أن تعادها 0 0 إذا كانت القيم غير محددة.

بدءا من التساؤل عما إذا كان هناك إصلاح / حل فعلي لهذا. لقد حاول الكثير من الناس وجميعهم يفشلون حتى الآن في الحصول على جميع حالات الحافة.

النسخة الكبيرة من backgroundPosition يبدو قابل للحياة ولكن لا أعرف ما يكفي من المستقية لإجراء تقييم دقيق لكيفية الذهاب عنه - من ما قرأته، يمكنك فقط استخدام Camelcase ك Getters إذا تم تعيين الخاصية مسبقا. من فضلك قل لي إذا كنت مخطئا.

ومع ذلك Line 33 هو خط فارغ.

سيكون خط 33 من واحد من ملفات .js الخاصة بك، وليس سطر 33 من HTML نفسه. أي فشل في الإبلاغ عن الملف الفعلي الذي حدث فيه الخطأ. انظر إلى السطر 33 من كل .js لشيء ما عن "BG"؛ إذا كان الأسوأ يأتي إلى الأسوأ، فيمكنك البدء في إدراج خطوط نيو في بداية كل .js ومعرفة ما إذا كان رقم الخط يتغير.

أتحقق من المصدر لديه تحديث عبر مصدر العرض ولكني أشعر أن هذا قد يكون مستلقا لي.

سيظهر لك مصدر العرض دائما ما حصل عليه من الخادم. لن تظهر أي تحديثات على DOM.

حاول الخلفية ISTeD

أيضا، تأكد من أن "هذا" موجود وأن طلبك لسمة إرجاع قيمة. IE سوف يرمي هذا النوع من الأخطاء عند محاولة استدعاء طريقة على خاصية غير موجودة، وبالتالي BG لاغية أو لاغية كائن. إذا كنت لا تهتم IE، يمكنك القيام BG = $ (هذا) ... || "حتى هناك دائما شيء المشار إليه.

أيضا، لا علاقة لها بالخطأ الذي تحصل عليه، ولكن قيمة الفهرس الخاصة بك من صحة 1؟ هل تعني -1؟

yupp،
حاول وضع الخلفية بدلا من ذلك أو قم بتعيين موضع الخلفية مع JQuery قبل الاتصال به. سوء تخمين المرء غالبا ما يعرف المواقف من خلال CSS قبل أن يدعوها. انها ليست جميلة، ولكن بطريقة ما فعلت الخدعة بالنسبة لي.)

على سبيل المثال:

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

إذا كان هناك شيء يساعد، فمن الممكن أيضا إجراء الحيلة التالية.

يمكننا أن نحل محل خلفية عنصر من عنصر داخلي في وضعه مطلقا (مع نفس الخلفية). سيتم استبدال الإحداثيات ب left و top الخصائص. هذا سيعمل في جميع المتصفحات.

لفهم أفضل، من فضلك، حدد الرمز:

قبل

<div></div>

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

بعد

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

هذا الحل غير مرن للغاية، لكنه ساعدني في إظهار أيقونات تحوم الدولة بشكل صحيح.

لا يمكنك استخدام شرطات في وظيفة JQuery CSS. عليك أن تفعل ذلك في Camelcase:.css('backgroundPosition') أو .css('backgroundPositionX') و .css('backgroundPositionY') بالنسبة بمعنى آخر

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top