0

動作の小さな例を作成しました。基本的に、左側に拡張可能なペインがあるページがあります。展開すると、Chrome が CSS の更新に失敗しているようです。

http://jsfiddle.net/HUHqA/2/

この例では、左側のパネルを展開する緑色の四角形をクリックします。css クラスは JQuery を介して右側のパネルに削除されます。何らかのレイアウト アクションが発生するまで、CSS クラスは適用されないようです。たとえば、ページのサイズを少し変更したり、開発者ツールを開いてランダムな CSS のチェックを外したりします。そのアクションを実行すると、青い長方形の端が本来あるべき場所にジャンプします。

あるクラスの !important が他のクラスをオーバーライドすることに関連しているようです。

最初は、次の 2 つのクラスがあります。

#main-content-right{
    min-width:200px;
    padding:0 15px 0 100px;
    margin-bottom:10px;
    z-index:1;
    min-height:300px;
}

.main-content-collapse-right{
    padding:0 150px 0 29px !important;
}

その後、後者は削除されます。

私のハック関数の行のコメントを外すと、修正されます。基本的に2つの質問があります。
1) これはブラウザ自体のバグですか? 2) ランダムな CSS を切り替えるよりも良い解決策はありますか?

編集: 質問 1 に対する答えは「はい」のようです: https://bugs.webkit.org/show_bug.cgi?id=93876簡易デモ:​​ https://bug-93876-attachments.webkit.org/attachment。 cgi?id=158063

4

1 に答える 1

0

!important代わりにこれを使用して、を取り除くことができるはずです。

#main-content-right.main-content-collapse-right{
 padding:0 150px 0 29px;
}

!importantid が含まれていると、特異性は不必要に十分高くなるはずです。

于 2012-11-14T22:45:48.623 に答える