Исправлено положение фона в IE - PullRequest
Новая
       24

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

13 голосов
/ 27 февраля 2009

Я получаю эту проблему в 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 ]

34 голосов
/ 27 февраля 2009

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

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

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

4 голосов
/ 23 октября 2011

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

4 голосов
/ 17 февраля 2011

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

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

3 голосов
/ 25 февраля 2010

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

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

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

2 голосов
/ 28 февраля 2009

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

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

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

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

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

2 голосов
/ 27 февраля 2009

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

1 голос
/ 27 февраля 2009

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

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

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

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

0 голосов
/ 06 июля 2013

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

Мы можем заменить фон элемента внутренним абсолютно позиционированным элементом (с тем же фоном). Координаты будут заменены на свойства left и top. Это будет работать во всех браузерах.

Для лучшего понимания, пожалуйста, проверьте код:

До 

<div></div>

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

* После 1015 *

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

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

0 голосов
/ 24 апреля 2013

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
0 голосов
/ 07 февраля 2011

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

Страница:
...