更新/ CSS

Question

<div id="box1"> 
    <div id="box2" style="height:60%"></div> 
</div> 

更新を再計算 - それは愚かなものであることが判明：私は適切に閉じられていない親のdivがありました。私はまだそれを修正するために管理されたWebインスペクタでいくつかのCSSを変更する不思議だ。みんな、ありがとう！ BOX2 doesnの

ウィンドウのリサイズで

、BOX1の高さではJavaScriptを使用して変更されていますが、：

---

問題は、WebKitのブラウザ（Safariの、モバイルサファリ、クロム、Androidのブラウザ）で行われますが、FirefoxでありませんWebインスペクタに入り、要素のスタイル属性でない限り、要素のCSSルールを手動で変更するまで、box1の新しい高さの60％に拡大/縮小しません。 （したがって、私が変更するルールは、インラインCSSまたは.cssファイルから発生する必要がありますが、どのファイルでも問題ありません）

何が起こっていますか？なぜこれが起こるのですか？何らかの再計算やCSSのリフレッシュがある場合、ウィンドウのサイズ変更時にこれを強制するにはどうすればよいですか？

Answer 1

これは愚かなものであることが判明しました。私が正しく閉じていなかった親部門がありました。私はまだそれを修正するために管理されたWebインスペクタでいくつかのCSSを変更する不思議だ。みんな、ありがとう！

Answer 2

これはブラウザのバグだと思います。

多分elemnt_box2.stye=element_box2.styleのようなものが更新を引き起こすでしょうが、これは回避策になります。

JavascriptのDOMアップデートは、すぐには完全に処理されないが、スクリプトの実行が終了した後であることに注意してください。これは効率のためです。カスケードする変更は、次のエントリポイントまでスクリプトには表示されません。

Answer 3

私は同様の問題を抱えていました。ここでfloat:leftをオフにするとすぐに小さなdivが小さくなります。divは、Firefoxではなく、Chromeでのみ上または下にジャンプします。私のために働いた解決策は余分にclear:left削除されました。