修复IE中的背景位置
当我运行一段使用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个插件：draggable和zoom。 无论我对代码做什么，总是第33行出错。 我通过查看源检查源是否有更新，但我觉得这可能对我说谎。
$(document).ready(function() { $('#draggable').drag(); $('#zoom').zoom({target_div:"draggable", zoom_images:new Array('https://stackoverflow.com/questions/594870/fix-for-background-position-in-ie/tiles/mapSpain-smaller.jpg', 'tiles/mapSpain.jpg') }); });
基本上我要做的是用jQuery重新创建Pragmatic Ajax地图演示。
看来这段代码的第二行造成了麻烦：
bg = $(this).css('background-position'); if(bg.indexOf('%')>1){
它似乎试图选择#draggable的背景位置属性而不是找到它？ 手动添加background-position: 0 0; 没有解决它。 关于如何解决这个问题的任何想法？
我尝试使用MS脚本调试器，但这几乎没用。 无法检查变量或其他任何内容。
关于Interweb的更多挖掘揭示了答案：IE不理解选择器background-position 。 它理解非标准的background-position-x和background-position-y 。
目前正在一起黑客攻击它。
好的，雷德蒙德。
为了解决Internet Explorer不支持“background-position”CSS属性这一事实，从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'); }
不幸的是，它返回中心，尽管在线资源我可以找到状态它应该返回0 0如果值未定义。
开始怀疑是否存在实际的修复/解决方法。 很多人都尝试过，到目前为止所有人都未能抓住所有边缘案例。
camelCase版本的backgroundPosition似乎可行，但我不太了解jQuery来准确评估如何去做 – 从我读过的你只能使用camelCase作为getter如果之前设置了属性。 请告诉我，如果我弄错了。
然而，第33行是空白行。
它将是你的一个.js文件的第33行，而不是HTML本身的第33行。 IE无法报告错误所在的实际文件。请查看每个.js的第33行，了解有关’bg’的内容。 如果最坏的情况发生，你可以在每个.js的开头插入换行符，看看行号是否改变。
我通过查看源检查源是否有更新，但我觉得这可能对我说谎。
查看源代码将始终显示IE从服务器获取的内容。 它不会显示对DOM的任何更新。
尝试backgroundPosition istead
此外，请确保“this”存在，并且您对属性的请求返回值。 当您尝试在不存在的属性上调用方法时，IE将抛出此类错误，因此bg为null或null为对象。 如果你不关心IE你可以做bg = $（this）… || ”所以总是引用一些东西。
此外，与您获得的错误无关，但您的索引值是否正确？ 你的意思是-1？
Yupp，
尝试使用background-position或者在调用之前使用jquery设置background-position。 我想在调用之前通常会通过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 { background: url(mySprite.png); background-position: -100px 0; }
后
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); }
这个解决方案不是很灵活，但它帮助我正确显示图标hover状态。
你不能在jquery css函数中使用破折号。 你必须在camelCase中执行： .css('backgroundPosition')或.css('backgroundPositionX')和.css('backgroundPositionY')用于IE