修复 IE 中的背景位置

Posted 2023-05-08

技术标签:

【中文标题】修复 IE 中的背景位置【英文标题】：Fix for background-position in IE 【发布时间】：2010-10-10 08:10:45 【问题描述】：

在运行一段使用 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" ></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 地图演示。

看来这个sn-p的第二行引起了麻烦：

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

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

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

【问题讨论】：

你可以为此获取一个 CSS 钩子插件 - github.com/brandonaaron/jquery-cssHooks 不幸的是，当我需要它时它不可用，但可能对将来通过这种方式的人有用。 【参考方案1】：

在 Interweb 上进行更多挖掘发现了答案：IE 不理解选择器 background-position。它理解非标准的background-position-x 和background-position-y。

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

不错，雷德蒙德。

【讨论】：

好收获。一般来说，像“背景”这样的“快捷方式”聚合 CSS 属性在使用 element.currentStyle（这是 jQuery 在 IE 上计算当前样式的方式）时不起作用。 “背景位置”通常不应该是快捷方式属性，但 IE 的单独 X/Y 扩展名有效地使其成为一个。我不太确定代码实际上试图做什么 — 它将匹配字符串“0% 0%”但不匹配“1% 100px”或许多其他可能的值。对我来说，这看起来像是狡猾、脆弱的代码...... 好的。我将对其进行修改，使其更健壮。我已经安装了 IE8，所以我可以更轻松地调试。值得注意的是，Firefox（至少 3.5 版本以上）不支持 background-position-x/y。所以这是一个让人头疼的地方 IE 似乎不支持检索百分比值也毫无价值。出于某种原因，检索到的值始终以像素为单位。【参考方案2】：

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

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

【讨论】：

【参考方案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 兼容视图中运行良好。

【讨论】：

【参考方案4】：

这对我有用：

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

希望它对你有用。

【讨论】：

最后，由于 MSIE 不合规性以及在 php 中将 SVG 转换为 JPEG，我不得不放弃使用背景图片的技巧，现在我使用 Raphael 和 jQuery。好处是它也适用于 IE6！【参考方案5】：

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

【讨论】：

jquery 后跟可拖动然后缩放。在 IE 中调试是一件很麻烦的事。尝试通过仅加载两个 js 文件（可拖动和缩放）之一来隔离它。您可能需要做一些警报才能真正隔离它:(【参考方案6】：

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

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

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

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

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

【讨论】：

【参考方案7】：

但是第 33 行是一个空行。

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

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

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

【讨论】：

bg 在 draggable.js 中被引用，但它不在第 33 行。它在 34、35、39、40 和 41 上。我想我会开始看那里。可惜 IE 没有 FireBug 插件：-( 那就是 34 了 — IE 计算行号的方法与文本编辑器相比通常相差一个。有 IE 的 JS 调试器，例如你会得到一个带有 IE8 测试版的调试器。我发现IE引用的行号完全没用。我从未在代码中的问题所在的任何地方看到它。【参考方案8】：

尝试使用 backgroundPosition 代替

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

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

【讨论】：

您可以拥有的最小值是 0% - 所以百分比符号的最小索引将是 1。Bobince 指出该代码是脆弱的，并且在网上阅读意味着我将不得不重写它。就我个人而言，我认为 jQuery 应该跨浏览器规范化这个？！【参考方案9】：

是的，请尝试使用背景位置，或者在调用之前使用 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

【讨论】：

【参考方案10】：

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

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

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

【讨论】：

【参考方案11】：

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

【讨论】：

是的，你可以。 .css('background-color', '#000') 和 .css( backgroundColor : '#00f' ) 都可以使用；但请注意，骆驼案例示例需要在对象 ... 中查看此演示：jsfiddle.net/Mottie/guMdv

以上是关于修复 IE 中的背景位置的主要内容，如果未能解决你的问题，请参考以下文章

CSS 修复iE背景透明度：ie_style.css

IE中按钮背景图像的修复