Chrome에서 outerHeight가 잘못된 값을 제공합니다. IE 및 FireFox에서 확인

jquery.smartWizard 플러그인에는 wizard 단계의 높이를 조정하는 fixHeight라는 함수가 있습니다. 이 단계는 단계가 처음 표시 될 때 또는 단계 내 숨겨진 div를 나타낼 때 사용됩니다. IE (Win8.1의 IE 11 이상) 및 FireFox에서 정상적으로 작동합니다. 그러나 최신 버전의 Chrome (버전 40.0.2214.94 m)에서 outerHeight는 100 픽셀 이상으로 훨씬 더 작은 값입니다. Chrome에서 outerHeight가 잘못된 값을 제공합니다. IE 및 FireFox에서 확인

이

은 밖으로 상자의 함수입니다 : 내가 애니메이션을 추가 할 수있는 마지막 단계를 수정

SmartWizard.prototype.fixHeight = function(){ 
    var height = 0; 

    var selStep = this.steps.eq(this.curStepIdx); 
    var stepContainer = _step(this, selStep); 
    stepContainer.children().each(function() { 
     if($(this).is(':visible')) { 
      height += $(this).outerHeight(true); 
     } 
    }); 

    // These values (5 and 20) are experimentally chosen. 
    //stepContainer.height(height); 
    //this.elmStepContainer.height(height + 12); 

    stepContainer.animate({ "height": height - 12 }, 500); 
    this.elmStepContainer.animate({ "height": height }, 500); 
    alert(window.outerHeight); 

}

. Chrome 사용 여부에 관계없이

편집 : 다음은 IE와 Chrome의 차이점을 보여주는 피들입니다. 회원을 클릭 한 다음 비회원을 클릭하십시오. 두 번째 값 집합이 각 브라우저마다 다름을 알 수 있습니다. http://jsfiddle.net/xjk8m8b1/

EDIT2 : 여기 당신이 시도하고 눈에 보이는 요소를 계산 할 때까지 두 브라우저가 높이 같은 값을 얻을 보여줍니다 또 다른 바이올린입니다. 그러면 Chrome이 꺼져 있습니다. http://jsfiddle.net/xjk8m8b1/2/

출처

2015-02-02 Connie DeCinko

질문을 jsFiddle ** 및 ** 모든 관련 코드/CSS/HTML 마크 업으로 복제하려면 샘플을 제공해야합니다. –

아마도 모든 콘텐츠가 완전히 렌더링되기를 기다리지 않기 때문에 문제가 될 수 있습니다. –

I '윈도우로드 이벤트, 페이지로드에서 래핑을 시도하고 심지어 지연을 추가했는데 그 중 아무 것도 어떤 변화도 일으키지 않았다. –

최선의 해결책은 아니지만 문제를 파악했습니다. 파이어 폭스와 IE는 모두 div의 모든 부분의 높이를 더하고 끊기 태그와 수직 공간을 만드는 모든 것을 포함합니다. 크롬, 내 의견으로는,이 여분 성분을 추가하지 않으며, 부서진다! 소비 된 수직 공간에 대해 실제 값을 반환하지 않습니다.

제 해결 방법은 다른 dummy div 안에 div의 내용을 래핑하는 것입니다. 이 방법으로 jquery는 첫 번째 자식 div의 높이를보고 올바르게 높이를 반환합니다.

출처

2015-02-02 21:58:41

크롬은 '
'요소가 흐름 콘텐츠에 영향을 미치더라도 보이지 않도록합니다. '크롬, 제 의견으로는 부패 해요. : 나는 동의하는 경향이있다. –

Chrome에서 outerHeight가 잘못된 값을 제공합니다. IE 및 FireFox에서 확인

답변

관련 문제