2

値のリストをリストボックスにロードするページがあります。ページの読み込み時にデータベースから値が取得され、PHPを使用してリストが作成されます。

ページが読み込まれた後、ユーザーは新しい値を入力し、jQueryを介してリストに追加できます。新しいリストアイテムは、jQueryを使用してDOMツリーとして構築されますが、PHPによって生成されたものとすべての点で同一です。Chrome開発ツールを使用して2つを比較しましたが、同じです。

とにかく、これはすべて正常に機能しますが、jQueryで挿入されたスパンの1つがわずかに異なる位置にある点が異なります。

例

（オレンジ色の点線は視覚的な参照用に追加されています。これらはoutline値であるため、要素の配置には影響しません）

私は両方に同じクラスを使用し、Chromeで計算されたスタイルもチェックしました。PHPによって挿入されたリストアイテムとjQueryによって挿入されたリストアイテムは、まったく同じスタイルです。それでも、jQueryを介して挿入されたSmithBobは並んでいません。

これを引き起こしている可能性がありますか？

かなりたくさんあるのでCSSを投稿していませんが、どれだけ役立つかわかりません。個々の計算値を調べましたが、それらはすべて同一であるため、CSSの問題ではない可能性があると思います。

編集： [私が制御していないサーバーに存在していたため、テストURLを削除しました。質問に回答したため、テストURLは不要になりました]

左側のリストにある赤いボタンは右側のリストにアイテムを追加するはずですが、上の画像のように、それらは整列していないように見えます。

4

2 に答える 2

1

正直なところ、ユーザーが挿入するアイテムではなく、ページ読み込み時に挿入されるアイテムに問題があると思います。

英語版の Chrome でページを開始すると、「現在アクティブな項目」リストがすべて台無しになっています。赤いテキストのボタンをクリックして再度追加する前に、各項目を削除すると、リストが正常に表示されます。また、各項目が 2 - 1 が隣接する要素と重なるのではなく、1 つの行に存在するため、マウス ホバリングが再び正しく機能するようになります。

これは私が見ているものです。左の画像はページがロードされた直後で、右の画像はクリアして再入力した後のリストを示しています。

ここに画像の説明を入力

完全を期すために追加されたコード - 以下のコメントで約束されています。それが他の誰かを助けるなら、素晴らしいです！

<script>
<?php
    printf("var apartmentComplexes = { mArray : %s };", json_encode($apartmentComplexes));
?>

// an exerpt of what above statement produces
var apartmentComplexes = { mArray : [{"name":"Aria","description":"Uma das<br> mais exclusivas propostas de Porto ......

function myOnLoad()
{
    var numComplexes = apartmentComplexes.mArray.length;

    // do some other stuff with the apartmentComplexes object


    setPageApartmentComplex(0);
}

</script>
于 2012-10-12T08:36:30.250 に答える