13

当运行一段使用 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){

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

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

4

11 回答 11

34

在 Interweb 上进行更多挖掘已经揭示了答案：IE 不理解 selector background-position。它理解非标准background-position-x和background-position-y.

目前正在一起破解某些东西以解决它。

不错，雷德蒙德。

于 2009-02-27T16:51:52.873 回答
4

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

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

于 2011-02-17T07:12:11.453 回答
4

挺有趣的。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 兼容视图中运行良好。

于 2011-10-23T01:44:23.333 回答
3

这对我有用：

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

希望它对你有用。

于 2010-02-25T01:05:05.600 回答
2

您可能需要检查以确保以正确的顺序加载 js 文件，以便考虑任何依赖关系。

于 2009-02-27T14:05:40.420 回答
2

后来我想了一点（和一杯茶）：

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

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

开始怀疑是否有实际的修复/解决方法。很多人都尝试过，但到目前为止都未能捕捉到所有边缘情况。

camelCase 版本backgroundPosition似乎可行，但我对 jQuery 的了解还不够，无法准确评估如何去做——从我读过的内容来看，如果之前已设置该属性，您只能使用 camelCase 作为 getter。如果我弄错了，请告诉我。

于 2009-02-27T23:45:55.390 回答
1

但是第 33 行是一个空行。

它将是您的 .js 文件之一的第 33 行，而不是 HTML 本身的第 33 行。IE 无法报告错误所在的实际文件。请查看每个 .js 的第 33 行，了解有关“bg”的信息；如果最坏的情况变得最坏，您可以开始在每个 .js 的开头插入换行符并查看行号是否更改。

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

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

于 2009-02-27T14:48:23.937 回答
0

试试 backgroundPosition 代替

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

此外，与您遇到的错误无关，但您的索引值 1 是否正确？你是说 -1 吗？

于 2009-02-27T22:06:05.910 回答
0

您不能在 jquery css 函数中使用破折号。你必须在 camelCase: .css('backgroundPosition')或IE.css('backgroundPositionX')中这样.css('backgroundPositionY')做

于 2011-02-06T22:44:36.063 回答
0

是的，
请尝试使用背景位置，或者在调用之前使用 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
于 2013-04-24T09:54:03.850 回答
0

如果没有任何帮助，也可以使用以下技巧。

我们可以将元素的背景替换为内部绝对定位的元素（具有相同的背景）。坐标将替换为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);
}

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

于 2013-07-06T10:40:55.757 回答