2

次のHTMLとCSSを追加するまで、うまく機能するWebページがあります。

HTML:

<div class="content">
    <div class="inner_content">
        <!-- old HTML within these 2 div tags worked find before adding these 2 new div tags -->
    </div>
</div>

CSS:

.content
{
    background:#BBBBBB;
}

.inner_content
{
    width:993px;
    margin:auto;
    padding:10px 0px 0px 10px;
    background:#AAAAAA;
}

奇妙な効果:

このjsfiddleで「奇妙な効果」が発生していることがわかります。

を含む div をクリックする(c)と、小さなドロップダウンが表示されます。その後、ウィジェットのヘッダーをドラッグしてウィジェットを移動しようとすると、(c)

上記の HTML と CSS を追加する前は、このようなことはありませんでした。

スクリーンショット:

問題を示すスクリーンショットを次に示します。

ドロップダウンはここでうまく見えます: ここに画像の説明を入力 クリックして拡大.

古い HTML でドロップダウンを有効にしてウィジェットを移動すると、ドロップダウンはウィジェットで正しく移動します。 ここに画像の説明を入力 クリックして拡大します。

新しい div/css を追加してドロップダウンを有効にしてウィジェットを移動すると、ウィジェットでドロップダウンが正しく移動しません: ここに画像の説明を入力 クリックして拡大します。

質問：

HTML と CSS がページに追加する効果を失うことなく、ドロップダウンに奇妙なことをさせることなく、それを修正する方法はありますか?

4

2 に答える 2

2

ドラッグを開始すると.widget、jQuery-UIはposition: absolute;その.widget要素にスタイルを追加し、ドラッグが停止すると削除されます。これが、ドロップダウンがジャンプ位置にジャンプする原因です。

修正するには、測位演算のスタイルに追加してposition: relative;（これposition: absolute;も機能します）.widget、再評価します。私は提案します：

$dd.css({
    top: $nav3.outerHeight()+10,
    right: 10
});

z-indexのも増やす必要があるかもしれません.dropdown。

http://jsfiddle.net/mblase75/RrpGr/14/

実行できる最適化は他にもたくさんありますが、問題を解決するにはこれで十分です。

于 2012-11-27T15:30:49.560 に答える
1

これは、1 つの div に与えるパディングが原因です。

要素に対するドロップダウンの位置。ドラッグを開始すると、ドロップダウンは別の要素に対して相対的に配置されます。

全体的に、あなたの HTML と CSS は非常に面倒ですが、ここに解決策があります: http://jsfiddle.net/RrpGr/3/

フロート要素を含めることが唯一の目的だったので、overflow: hidden を .widget_header から削除し (そうですか?)、代わりにフロートをクリアする疑似要素を追加しました。

.widget_header:after {
    content: "";
    display: table;
    clear: both;
}

さらに、Javascript からかなりの数の行を削除しました。これらは、CSS プロパティを設定する (または値を計算する) だけの場所です。

ドロップダウンを .widget_header に対して相対的に配置できない理由がわかりません(それが私がしたことです)?

于 2012-11-27T15:33:12.297 に答える