Google Chrome нарушает макет HTML при скрытии элементов - PullRequest
Новая
       5

Google Chrome нарушает макет HTML при скрытии элементов

0 голосов
/ 04 января 2012

Я создал макет 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 есть некоторые странные проблемы.

Сначала были проблемы, потому что я не помещал высоту в 1 пиксель в нижний колонтитул и окна: окна Chrome накладывались друг на друга. После установки высоты в 1 пиксель он начал работать нормально при добавлении окон, но когда я удаляю любое окно с помощью Javascript, другие окна не перекомпоновываются (у них есть класс .wnd-placer с float: right), пока я не выполню одно из следующих действий: 1008 *

  • увеличение страницы, а затем увеличение до 100% - внезапно все прыгает, где и должно быть;

  • открыть панель разработчика и настроить CSS-файл .wnd-placer - достаточно просто включить / отключить любое свойство, и снова все мои окна переходят туда, где они должны быть.

Похоже, это специфично для Chrome. У Chrome возникли некоторые проблемы с пересчетом расположения этих DIV-файлов .wnd-placer после того, как я удалил некоторые из них.

Есть ли способ заставить Chrome перерисовать мои окна (как это происходит при увеличении / уменьшении или включении / отключении какого-либо свойства CSS), чтобы они перекомпоновывали вправо, как в других браузерах?

1 Ответ

0 голосов
/ 09 января 2012

Хотя лучшего ответа не было, я сделал следующий быстрый и грязный обходной путь для Chrome: 

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

Это работает. Конечно, я хотел бы избавиться от этого, но я не могу найти «волшебный CSS», который бы решил эту проблему.

...