当隐藏元素时,Google Chrome会破坏HTML布局

Google Chrome breaks HTML layout when hiding elements

本文关键字:HTML 布局 Chrome Google 隐藏 元素      更新时间:2023-09-26

我已经为页脚停靠的突出窗口创建了一个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>      

我需要那些占位符和页脚dock不超过1px高,所以我可以在没有窗口的时候点击页脚。使用Javascript动态添加和删除窗口(及其所有内容)。

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

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

  • 放大页面,然后放大到100% -突然一切都跳到它应该在的地方;

  • 打开开发者面板并调整一些CSS。wind -placer -只要启用/禁用任何属性就足够了,然后我所有的窗口都跳到它们应该在的地方。

这只是Chrome特定的,似乎,Chrome有一些问题重新计算那些。wind -placerdiv的布局后,我删除了一些。

是否有任何方法来强制Chrome重新绘制我的窗口(就像它做的,当我放大/缩小或启用/禁用任何CSS属性),所以他们流到右边,因为他们在其他浏览器?

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

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

它的工作原理。当然,我想摆脱它,但我找不到"神奇的CSS",可以解决这个问题。