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 マップのデモを再作成することです。

このスニペットの 2 行目が問題を引き起こしているようです。

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 はセレクターを理解していませんbackground-position。background-position-x規格外とわかりbackground-position-yます。

現在、それを回避するために何かを一緒にハッキングしています。

よかったね、レドモンド。

于 2009-02-27T16:51:52.873 に答える
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 に答える
4

Internet Explorer が "background-position" CSS 属性をサポートしていないという事実を回避するために、jQuery 1.4.3 以降では、.cssHooksオブジェクトを使用してこの属性をブラウザー間で正規化できます。

時間を節約するために、「background-position」と「background-position-x/y」の両方をデフォルトでサポートしていないブラウザーで期待どおりに動作させることができる背景位置 jQuery プラグインが利用可能です。

于 2011-02-17T07:12:11.453 に答える
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

少し考えて（そしてお茶を飲んで）、後で思いつきました：

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

残念ながら、値が未定義の場合は 0 0 を返す必要がある状態を見つけることができるオンライン リソースにもかかわらず、center center を返します。

これに対する実際の修正/回避策があるかどうか疑問に思い始めています。多くの人が試みましたが、これまでのところ、すべてのエッジケースをキャッチできませんでした.

の camelCase バージョンはbackgroundPosition実行可能のようですが、jQuery について十分に理解していないため、その方法を正確に評価することができません。プロパティが以前に設定されている場合にのみ、getter としてキャメルケースを使用できます。私が間違っている場合は教えてください。

于 2009-02-27T23:45:55.390 に答える
1

ただし、33行目は空行です。

HTML 自体の 33 行目ではなく、.js ファイルの 1 つの 33 行目になります。IE は、エラーが発生した実際のファイルを報告できません。「bg」については、各 .js の 33 行目を見てください。最悪の場合は、各 .js の先頭に改行を挿入して、行番号が変わるかどうかを確認できます。

ソースを表示してソースが更新されていることを確認しましたが、これは私に嘘をついている可能性があります。

ソースを表示すると、IE がサーバーから取得したものが常に表示されます。DOM への更新は表示されません。

于 2009-02-27T14:48:23.937 に答える
0

backgroundPositionisteadを試してください

また、「this」が存在し、属性のリクエストが値を返すことを確認してください。IEは、存在しないプロパティでメソッドを呼び出そうとすると、この種のエラーをスローします。したがって、bgはnullであるか、オブジェクトをnullにします。IEを気にしない場合は、bg = $（this）...||を実行できます。''常に何かが参照されるようにします。

また、発生しているエラーとは関係ありませんが、インデックス値1は正しいですか？-1のことですか？

于 2009-02-27T22:06:05.910 に答える
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 に答える
0

jquery css 関数ではダッシュを使用できません。あなたはcamelCaseでそれをしなければなりません: または.css('backgroundPosition')IEの場合.css('backgroundPositionX').css('backgroundPositionY')

于 2011-02-06T22:44:36.063 に答える