Исправить фоновые позиции в IE

Я получаю эту проблему в IE7 при запуске фрагмента кода, который использует jquery и 2 jquery-плагина. Код работает в FF3 и Chrome.

Полная ошибка:

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

Однако строка 33 является пустой строкой.

Я использую 2 плагина: draggable и zoom. Независимо от того, что я делаю с кодом, всегда стоит строка 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 с помощью jQuery.

Похоже, что вторая строка этого фрагмента вызывает проблемы:

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

Кажется, пытается выбрать свойство background-position #draggable и не найти его? Вручное добавление background-position: 0 0; не исправить. Любые идеи о том, как обойти эту проблему?

Я попытался использовать MS Script Debugger, но это почти бесполезно. Невозможно проверить переменные или что-то еще.

ОТВЕТЫ

Ответ 1

Немного больше копаний в Interweb показал ответ: IE не понимает селектор background-position. Он понимает нестандартные background-position-x и background-position-y.

В настоящее время взломать что-то вместе, чтобы обойти это.

Хороший, Редмонд.

Ответ 2

Чтобы обойти тот факт, что Internet Explorer не поддерживает атрибут CSS "background-position", с jQuery 1.4.3+ вы можете использовать .cssHooks, чтобы нормализовать этот атрибут между браузерами.

Чтобы сэкономить некоторое время, имеется фоновое положение плагина jQuery, которое позволяет использовать как "background-position", так и "background-position- x/y" работать как ожидалось в браузерах, которые по умолчанию не поддерживают тот или другой.

Ответ 3

Это интересно. IE8 не понимает getter backgroundPosition, но он понимает 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;
});

Он отлично работает в IE8 и совместимом с IE8 представлении.

Ответ 4

Это сработало для меня:

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

надеюсь, что это сработает для вас.

Ответ 5

Возможно, вы захотите проверить, что вы загружаете файлы js в правильном порядке, чтобы учитывались любые зависимости.

Ответ 6

Немного о мышлении (и чашке чая) я позже придумал:

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

К сожалению, он возвращает центр центра, несмотря на онлайн-ресурсы, которые я могу найти, он должен вернуть 0 0, если значения undefined.

Начинает задаваться вопросом, существует ли фактическое исправление/обходное решение для этого. Многие люди пробовали и все до сих пор не улавливают все краевые случаи.

Версия camelCase backgroundPosition кажется жизнеспособной, но я не знаю достаточно jQuery, чтобы дать точную оценку того, как это сделать - из того, что я прочитал, вы можете использовать camelCase только как получатели, если это свойство было установленный ранее. Скажите, пожалуйста, если я ошибаюсь.

Ответ 7

Однако строка 33 является пустой строкой.

Это будет строка 33 одного из ваших .js файлов, а не строка 33 самого HTML. IE не сообщает о том, в каком фактическом файле была ошибка. Посмотрите на строку 33 каждого .js для чего-то о 'bg; если худшее приходит к худшему, вы можете начать вставлять новые строки в начале каждого .js и посмотреть, меняется ли номер строки.

Я проверяю, что источник имеет обновление через источник просмотра, но я чувствую, что это может вредить мне.

Источник просмотра всегда будет показывать вам, что IE получил с сервера. Он не будет показывать обновления DOM.

Ответ 8

попробуйте backgroundPosition istead

Кроме того, убедитесь, что существует 'this' и что ваш запрос для атрибута возвращает значение. IE будет вызывать подобные ошибки при попытке вызвать метод для свойства, которого не существует, поэтому bg имеет значение null или null. если вы не заботитесь об IE, вы можете сделать bg = $(this)... || '', так что theres всегда что-то ссылается.

Кроме того, не связано с ошибкой, которую вы получаете, но верно ли значение вашего индекса 1? Вы имели в виду -1?

Ответ 9

Вы не можете использовать тире в функции jquery css. Вы должны сделать это в camelCase: .css('backgroundPosition') или .css('backgroundPositionX') и .css('backgroundPositionY') для IE

Ответ 10

Yupp,
Вместо этого попробуйте использовать background-position или просто установите фоновое положение с помощью 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

Ответ 11

Если ничего не помогает, возможно также сделать следующий трюк.

Мы можем заменить фон элемента внутренним абсолютно позиционированным элементом (с тем же фоном). Координаты будут заменены свойствами 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);
}

Это решение не очень гибкое, но оно помогло мне правильно отображать значки.