IEの背景位置を修正

StackOverflow https://stackoverflow.com/questions/594870

質問

IE7 で jquery と 2 つの jquery プラグインを使用するコードを実行すると、この問題が発生します。このコードは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 を使用してみましたが、ほとんど役に立ちませんでした。変数などを検査することはできません。

役に立ちましたか？

解決

もう少しInterwebして約掘りして答えを明らかにした：IEは、セレクタbackground-positionを理解していません。これは、非標準background-position-xとbackground-position-yを理解しています。

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

ニース1、レドモンドます。

他のヒント

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

時間を節約するには、次のような方法があります。 背景位置 jQuery プラグイン 「background-position」と「background-position-x/y」の両方が、デフォルトでどちらかをサポートしていないブラウザーでも期待どおりに動作できるようにする機能が利用可能です。

これは面白いです。 IE8はゲッターbackgroundPositionを理解していないが、それはセッターを理解します。

$('.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を返す必要があり、私は状態を見つけることができるオンラインリソースにもかかわらず、中央のセンターを返します。

これに対する実際の修正/回避策があるかどうか疑問に開始します。多くの人が試したし、すべてのこれまでのすべてのエッジケースをキャッチに失敗しています。

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

  

しかしライン33は空白行です。

これは、HTML自体の33行目ではない、ライン33あなたの.jsファイルの一つのでしょう。 IEはエラーが中にあった実際のファイルを報告するために失敗した「BG」についての何かのためにそれぞれの.jsのライン33を見てください。最悪の場合は、それぞれの.jsの開始時に改行を挿入を開始し、行番号が変わるかどうかを確認することができます。

  

私がチェックしたソースがビューのソースを経由してアップデートを持っていますが、私はこれが私にうそになる可能性を感じます。

ソースを表示は常にIEをサーバから得たものを紹介します。これは、DOMへの更新を表示しません。

backgroundPosition isteadを試してみてください。

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

また、あなたが取得しているエラーとは関係のない、しかし1のあなたのインデックス値が正しいですか？もしかして-1？

Yupp、代わりにバックグラウンドポジションを試してみてくださいまたはちょうどあなたがそれを呼び出す前に、jQueryを使って背景位置を設定
。病気推測1は、多くの場合、それを呼び出す前に、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></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);
}

このソリューションは非常に柔軟ではないが、それは、アイコンが正しく状態をホバー表示するために私を助けてくれます。

あなたはjqueryのCSS機能でダッシュを使用することはできません。あなたはキャメルケースでそれをしなければなりません。 用.css('backgroundPosition')または.css('backgroundPositionX')と.css('backgroundPositionY')の IE の

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top