javascript - 谷歌浏览器在隐藏元素时破坏了 HTML 布局

Question

我已经为页脚停靠的伸出窗口创建了一个 HTML 布局:

<style>
#footer-dock {
        position: fixed;   
        bottom: 0px;
        right: 0px;
        height: 1x;        
 }

#wnd-cont {
   float:right;    
   /* width is controlled from JS */
   height: 1px;       
}    

#wnds-area {
   float:right;  
   height: 1px;          
}   

 .wnd-placer {
        width: 270px;  
        height: 1px;   
        margin: 0 5px; 
        float: right;      
    }


/* floats out of placer */
.wnd {
       overflow: hidden;   
       width: 270px;  
       position: absolute;           
       bottom: 0px;  
    }

    .hdr {
        border:1px solid green;        
        height: 32px;
        background-color: green;
        position: relative;
    }   

    .title {
        color: gray;
    }

    .bdy {
       background: white;
       border: 1px solid green;
       height: 400px;
    }       
 </style>

        <div id="footer-dock">       
             <div id="wnd-cont">
                <div id="wnds-area">  
                    <div class="wnd-placer">         
                        <div class="wnd">             
                            <div class="hdr">
                            </div>
                            <div class="bdy">
                            Something else here Something else here Something else here Something here Something else here
                            </div>        
                        </div>   
                    </div>
<!-- other dynamically added windows go here -->
                </div> 
            </div>
        </div>      

我需要那些占位符和页脚停靠栏的高度不超过 1 像素，这样我就可以在没有窗口时点击页脚。使用 Javascript 动态添加和删除窗口(及其所有内容)。

在 Firefox 甚至 IE7 中一切正常，但 Chrome 有一些奇怪的问题。

起初，有一些问题，因为我没有将 1px 的高度放在页脚和窗口放置器上 - Chrome 将窗口堆叠在一起。放置 1px 高度后，它在添加窗口时开始正常运行，但是当我使用 Javascript 删除任何窗口时，其他窗口不会回流(它们具有带有 float: right 的 .wnd-placer 类)，直到我执行以下操作之一:

• 放大页面，然后缩放回 100% - 突然一切都跳到它应该在的地方；

• 打开开发人员面板并调整 .wnd-placer 的一些 CSS - 只需启用/禁用任何属性就足够了，我的所有窗口都会再次跳转到它们应该在的位置。

这只是 Chrome 特有的，看起来，在我删除其中一些后，Chrome 在重新计算那些 .wnd-placer DIV 的布局时遇到了一些问题。

有什么方法可以强制 Chrome 重新绘制我的窗口(就像我放大/缩小或启用/禁用任何 CSS 属性时所做的那样)，以便它们像在其他浏览器中一样重排到右侧？

Answer 1

虽然没有更好的答案，但我为 Chrome 做了以下快速而肮脏的解决方法:

    // force redraw for Chrome
    $('#footer-dock').hide(); 
    setTimeout(function(){
       $('#footer-dock').show(); 
    }, 10);

它有效。我当然想摆脱它，但我找不到可以解决这个问题的“神奇 CSS”。