ClientHeight/ClientWidth 다른 브라우저에서 다른 값을 반환합니다
https://stackoverflow.com/questions/833699
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
속성 document.body.clientHeight 그리고 document.body.clientWidth IE7, IE8 및 Firefox에서 다른 값을 반환합니다.
IE 8 :
document.body.clientHeight : 704
document.body.clientWidth : 1148
즉 7 :
document.body.clientHeight : 704
document.body.clientWidth : 1132
Firefox :
document.body.clientHeight : 620
document.body.clientWidth : 1152
이 불일치가 존재하는 이유는 무엇입니까?
jQuery를 사용하지 않고 다른 브라우저 (IE8, IE7, Firefox)에서 일관된 동등한 속성이 있습니까?
해결책
이것은 브라우저의 박스 모델과 관련이 있습니다. jQuery 또는 다른 JavaScript 추상화 라이브러리와 같은 것을 사용하여 DOM 모델을 정규화하십시오.
다른 팁
Paul A는 불일치가 존재하는 이유에 대해 옳지 만 NGM이 제공하는 솔루션은 잘못되었습니다 (jQuery의 의미에서).
jQuery (1.3)의 ClientHeight 및 ClientWidth와 동등한 것은 다음과 같습니다.
$(window).width(), $(window).height()
그만큼 신체 요소는 사용 가능한 너비를 취하며 일반적으로 브라우저 뷰포트입니다. 따라서 브라우저 크롬 테두리, 스크롤 바, 메뉴가 취해지는 수직 공간 및 What Not으로 인해 크로스 브라우저가 다릅니다.
높이가 다양하다는 사실은 또한 당신이 바디/html 높이는 일반적으로 내부의 요소에 의존하기 때문에 CSS를 통해 높이에서 100% 신체..
너희의 너비를 설정하지 않는 한 신체 CSS 또는 스타일 속성을 통해 고정 된 값에 대한 요소는 규칙적으로 크기가되며, 항상 크로스 브라우저/버전과 브라우저에 설치 한 플러그인에 따라 다릅니다. 그러한 경우의 일정한 값은 규칙에 대한 예외입니다 ...
브라우저 뷰포트의 자동 너비를 사용하지 않는 다른 요소에서 .ClientWidth를 호출하면 항상 요소 'width' + '패딩'을 반환합니다. 따라서 폭이 200이고 패딩이 20 인 div는 clientWidth = 240 (왼쪽과 오른쪽으로 20 개의 패딩)을 갖습니다.
그러나 ClientWidth를 불러 일으키는 이유는 결과의 예상 불일치가 정확하기 때문입니다. 당신이 당신이 일정한 너비를 얻고 값이 알려져 있다는 것을 알고 있다면, clientWidth를 호출하는 것은 중복됩니다 ...
jQuery의 OffSetheight 및 OffsetWidth와 동등한 것은 $ (Window) .width (), $ (Window)입니다. Height () ClientHeight 및 ClientWidth가 아닙니다.
Element.clientWidth & Element.clientHeight 해당 요소 컨텐츠의 높이/너비를 반환하여 해당 패딩이 추가됩니다.
이들의 jQuery 구현은 다음과 같습니다.$(target).outerWidth() & $(target).outerHeight()
.clientWidth & .clientHeight 현재 작업 초안 단계에있는 CSSOM View 모듈 사양에 포함되어 있습니다. 최신 브라우저는 레거시 플랫폼에서 일관된 성능을 보장하기 위해이 사양의 일관된 구현을 가지고 있지만 jQuery 구현을 여전히 사용해야합니다.
추가 정보:
- https : //developer.mozilla [dot] org/en-us/docs/web/api/element.clientwidth
- https : //developer.mozilla [dot] org/en-us/docs/web/api/element.clientHeight
ClientHeight에서 내 문제를 해결하기 위해 한 일은 Controls Firstchild의 ClientHight를 사용하는 것입니다. IE 11을 사용하여 데이터베이스에서 라벨을 인쇄하고 IE 8에서 일한 클라이언트는 IE 11에서 0의 높이를 반환했습니다. IE 11에서는 1 차로 나열된 제어의 속성을 찾았으며 클라이언트가 실제로있는 경우 속성이있는 속성이 있습니다. 내가 찾고 있던 높이. 따라서 통제가 0의 클라이언트 크기를 반환하는 경우 자녀의 재산을 살펴보십시오. 그것은 나를 도왔다 ...
나는 비슷한 문제가있었습니다. Firefox는 OBJ.ClientHeight의 올바른 값을 반환했지만 즉, 0을 반환하지 않았습니다. IE가 ClientHeight에 대해 가지고있는 상태가있는 것 같습니다.
IE의 박스 모델 버그로 인해 발생할 수 있습니다. 이 문제를 해결하려면 사용할 수 있습니다 박스 모델 해킹.
브라우저 창에 대한 추가 정보 :http://www.w3schools.com/js/js_window.asp?output=print
