Исправить положение фона в 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 плагина: перетаскивание и масштабирование. Независимо от того, что я делаю с кодом, всегда виновата строка 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, но это почти бесполезно. Невозможно проверить переменные или что-то еще.

Ответов (11)

Решение

A bit more digging about on the Interweb has revealed the answer: IE doesn't understand the selector background-position . It understands the non-standard background-position-x and background-position-y .

Currently hacking something together to workaround it.

Nice one, Redmond.

Это интересно. IE8 не понимает получателя backgroundPosition, но понимает сеттер.

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

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

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

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

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

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

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

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

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

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

Также убедитесь, что «this» существует и что ваш запрос атрибута возвращает значение. IE выдаст такие ошибки, когда вы попытаетесь вызвать метод для несуществующего свойства, поэтому bg имеет значение NULL или NULL для объекта. если вас не волнует IE, вы можете сделать bg = $ (this) ... || '', так что всегда есть ссылки.

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

Однако строка 33 - это пустая строка.

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

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

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

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

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

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

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

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

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

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

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