Исправлено фоновое положение в IE

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

Вопрос

Я получаю эту проблему в 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.Я проверяю, что источник обновлен через view source, но я чувствую, что это может быть ложью для меня.

<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 map с помощью jQuery.

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

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

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

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

Это было полезно?

Решение

Еще немного покопавшись в Интернете, я нашел ответ:IE не понимает селектор background-position.Он понимает нестандартные background-position-x и background-position-y.

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

Молодец, Редмонд.

Другие советы

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

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

Это интересно.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 представлении.

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

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

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

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

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

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

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

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

Просмотр источника всегда покажет вам, что IE получил с сервера.Он не покажет никаких обновлений для DOM.

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

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

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

Дапп,
Попробуйте вместо этого 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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top