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

【问题标题】：Google Chrome breaks HTML layout when hiding elements谷歌浏览器在隐藏元素时破坏了 HTML 布局
【发布时间】：2012-02-02 15:28:11
【问题描述】：

我已经为页脚停靠的突出窗口创建了一个 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 删除任何窗口时，其他窗口不会重排（它们具有带有浮动的 .wnd-placer 类：对），直到我执行以下操作之一：

放大页面，然后再放大到 100% - 突然间一切都跳到了应有的位置；
打开开发者面板并调整 .wnd-placer 的一些 CSS - 只需启用/禁用任何属性就足够了，我的所有窗口都会再次跳转到它们应该在的位置。

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

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

【问题讨论】：

你的问题不是很清楚。一个工作示例将有助于解决这个问题。

标签： javascript css google-chrome layout redraw

【解决方案1】：

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

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

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

【讨论】：