2

特定のブラウザで要素を配置する際に問題があります。ここにある jQuery オートコンプリートを使用しています。オートコンプリート値を含む div は、テキスト ボックスのすぐ下にあり、完全に整列している必要があります。このコードは、によって生成された left プロパティを使用して、div の css left プロパティを設定します。$(textbox).offset();

コードを解凍して問題を解決しようとすると、次のようになります。

var a = $(textbox).offset();
element.css({
    width: typeof e.width == "string" || e.width > 0 ? e.width : $(textbox).width(),
    top: a.top + textbox.offsetHeight,
    left: a.left
}).show();

これは動作するはずで、Firefox でも動作します。IE8、Chromeでは動作しません。上部の位置は常に正しいですが、div が左にずれすぎたり、右にずれたりすることがあります。

さまざまなコンピューター (すべて Windows XP を使用) では、IE8 で動作します...これはどうしてでしょうか? Mac、OS 10.5 でもテストしました。Firefox では動作しますが、Safari では動作しません。

プラグインを無効にしたり、画面の解像度を変更したり、ウィンドウのサイズを変更したりしました...場所によっては、一貫して動作しないことがあります。

誰かが私が行方不明になっていることを考えることができますか?

更新: jQuery 1.4.2 およびjQuery UI 1.8rc3 で提供されるオートコンプリートを使用するようにコードを作り直しました。それはまだ壊れています、同じ問題です。助けてください！

更新 2 :この関連する質問を参照してください。オフセットを使用しているため、jQuery UI のオートコンプリートが壊れます。誰かが回避策を持っていますか?

これは、トリップする UI オートコンプリート機能の JavaScript です。

.css({ top: (offset.top + this.element.height) + 'px', left: offset.left + 'px' })

に変更すると正常にtop: '0px', left: '0px'動作しますが、明らかに間違った場所に配置されています。

4

2 に答える 2

2

私はついに何が起こっているのかを理解しました。ボディの幅を定義する CSS ルールがありました。

body {
    width: 900px;
}

これを変更してwidth: 100%;、ページ全体を幅 900px の div で囲むと、期待どおりに機能しました。

IE は body 要素を使用して の上と左の値を測定しているように見えますがoffset()、項目を絶対に配置するときに上と左の距離を測定するときにウィンドウの端を使用します。

この答えが、私がこれまで無駄にしてきたすべての時間を他の誰かを救うことを願っています...

于 2010-03-17T14:18:01.277 に答える
1

私は同様の質問に出会い、最終的にfloatプロパティが影響を与えるrelativeことを発見relativeし、Internet Explorer 8ではdivが安定しなくなりましたが、Firefoxではうまく機能します。

于 2011-08-08T04:50:01.757 に答える