구글 크롬은 내가 바닥 글 - 고정 부착 아웃 창문에 대한 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에는 이상한 문제가 있습니다.

처음에는 footer와 window placers에 1px 높이를 두지 않았기 때문에 문제가있었습니다. 1px 높이를 넣은 후 창을 추가 할 때 정상적으로 작동하지만 자바를 사용하여 창을 제거하면 다음 중 하나를 수행 할 때까지 다른 창은 리플 로우되지 않습니다 (float : right가있는 .wnd-placer 클래스가 있음)

• 페이지를 확대 한 다음 100 %로 확대하면 갑자기 모든 것이 점프됩니다.

• 개발자 패널을 열어 .wnd-placer의 일부 CSS를 조정하십시오. 모든 속성을 사용 설정/사용 중지하면 충분하며, 모든 창은 다시 있어야합니다.

이, 보인다, 다만 크롬 특정 크롬 내가 그들 중 일부를 삭제 한 후 그 .wnd - 사금하는 div 레이아웃을 재 계산하는 몇 가지 문제가있다.

다른 브라우저에서와 마찬가지로 크롬이 내 창을 확대/축소하거나 CSS 속성을 활성화/비활성화 할 때와 마찬가지로 강제로 다시 그리기 때문에 강제로 오른쪽으로 리플 로우 할 수 있습니까? ? 그것은 작동

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

: 더 좋은 대답이 없었다 동안

Answer 1

, 나는 크롬에 대한 다음과 같은 빠른 & 더러운 해결 방법을했다. 물론 제거하고 싶지만이 문제를 해결할 "마법의 CSS"를 찾을 수는 없습니다.