Question

运行一段使用jquery和2个jquery插件的代码时，我在IE7中遇到了这个问题。该代码适用于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>

基本上我要做的是用jQuery重新创建Pragmatic Ajax地图演示。

看起来这段代码的第二行造成了麻烦：

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

似乎是在尝试选择#draggable的背景位置属性而没有找到它？手动添加background-position: 0 0;并没有解决问题。关于如何解决这个问题的任何想法？

我尝试使用MS Script Debugger但这几乎没用。无法检查变量或其他任何内容。

Answer 1

对Interweb的更多挖掘揭示了答案：IE不理解选择器background-position。它理解非标准background-position-x和background-position-y。

目前正在共同攻击某些事情以解决它。

好的，雷德蒙德。

Answer 2

为了解决Internet Explorer不支持“background-position”CSS属性这一事实，从jQuery 1.4.3+开始，您可以使用.cssHooks对象在浏览器之间规范化此属性。

为了节省一些时间，有background position jQuery plugin可用，允许“background-position”和“background-position-x / y”在不支持或不支持的浏览器中按预期工作其他默认情况下。

Answer 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兼容视图中效果很好。

Answer 4

这对我有用：

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

希望它能帮到你。

Answer 5

您可能需要检查以确保以正确的顺序加载js文件，以便考虑所有依赖项。

Answer 6

稍后我想出了一点思考（和一杯茶）：

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

不幸的是，它返回中心，尽管在线资源我可以找到状态，如果值未定义，它应该返回0 0。

开始怀疑是否存在实际修复/解决方法。很多人都尝试过，到目前为止还未能抓住所有边缘案例。

backgroundPosition的camelCase版本似乎可行，但我不太了解jQuery来准确评估如何去做 - 从我读过的你只能使用camelCase作为getter如果属性已经设定过。如果我弄错了，请告诉我。

Answer 7

然而，第33行是一个空行。

它将是你的一个.js文件的第33行，而不是HTML本身的第33行。 IE无法报告错误所在的实际文件。查看每个.js的第33行有关'bg'的内容;如果最坏的情况发生，你可以在每个.js的开头插入换行符，看看行号是否会改变。

我通过查看源检查源是否有更新，但我觉得这可能对我说谎。

查看源代码将始终显示IE从服务器获取的内容。它不会显示对DOM的任何更新。

Answer 8

尝试backgroundPosition istead

此外，请确保“this”存在，并且您对属性的请求返回值。当您尝试在不存在的属性上调用方法时，IE将抛出此类错误，因此bg为null或null为对象。如果你不关心IE你可以做bg = $（this）... || ''所以总是引用一些东西。

此外，与您获得的错误无关，但您的索引值是否正确？你的意思是-1？

Answer 9

您不能在jquery css函数中使用破折号。你必须在camelCase中做到这一点： IE

的.css('backgroundPosition')或.css('backgroundPositionX')及.css('backgroundPositionY')

Answer 10

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

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

这个解决方案不是很灵活，但它帮助我正确显示图标悬停状态。

修复IE中的背景位置

11 个答案: