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>

我需要那些占位符和页脚底座不超过1px高，所以当没有窗口时我可以点击页脚。使用Javascript动态添加和删除窗口（包含所有内容）。

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

起初，有问题，因为我没有将1px高度放在页脚和窗口放置器上 - Chrome将窗口堆叠在一起。在放入1px高度之后，它在添加窗口时开始正常运行，但是当我使用Javascript删除任何窗口时，其他窗口不会重排（它们具有.wnd-placer类，浮点数：右），直到我执行以下操作之一： / p>

放大页面然后缩小到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”。

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

1 个答案: