Firefox가 offsetHeight를 사용하여 div의 높이(0)를 얻는 문제를 해결하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

Firefox가 offsetHeight를 사용하여 div의 높이(0)를 얻는 문제를 해결하는 방법

不言

Jun 21, 2018 pm 04:33 PM

Firefox가 p의 높이를 얻어야 할 때, offsetHeight를 사용해야 하는 경우가 있습니다. 때로는 offsetHeight가 0으로 얻어지는 경우도 있습니다. 관심 있는 친구들은 다음을 참조할 수 있습니다.

Firefox에서 필요할 때 p의 높이를 얻으려면 offsetHeight를 사용해야 하는 경우가 많습니다. 때로는 offsetHeight가 0이 되는 현상이 발생할 수 있습니다.

IE 또는 Firefox를 사용할 때, 특히 현재 p+css 방법에서는 p의 높이가 정의되지 않는 경우가 많습니다. 이때 p개의 콘텐츠를 추가한 후 p의 높이를 구해야 할 때, offsetHeight를 사용해야 하는 경우가 많습니다.

사용하다 보면 offsetHeight가 0으로 얻어지는 현상이 가끔 발생하는데, 다양한 JS 디버깅 도구를 사용하여 디버깅을 하면 객체에 값이 보이는 것을 볼 수 있습니다(offsetHeight를 직접 가리키면 쓸모가 없지만, 만약 객체 뷰에 값이 있습니다. 디버거에서 객체를 보기 위해 Enter를 누르면 객체가 새로 고쳐져서 값을 갖게 됩니다.)

예를 들어 다음 프래그먼트

코드는 다음과 같습니다. :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script language=&#39;javascript&#39;> 
window.attachEvent( "onload", function(){ _resizeScroll2();} ); 
window.onresize=function(){winresize();}; 
function _resizeScroll2(){ 
var html1 = &#39;<p id="pcj" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="float:left;width:50px;">测试</p>&#39; 
+ &#39;<p style="float:left;width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
+ &#39;<p id="pcj2" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
document.getElementById(&#39;outer&#39;).innerHTML=html1; 
document.getElementById(&#39;pcj2&#39;).style.display=&#39;none&#39;; 
alert(document.getElementById(&#39;pcj2&#39;).offsetHeight); 
} 
</script> 
</head> 
<body> 
<p id=&#39;outer&#39;></p> 
</body> 
</html>

pcj의 높이를 얻으면 onload에 도착합니다. pcj 아래에 float 레이아웃이 있기 때문입니다.

이때 p가 단순하다면 여기에서 pcj2와 같은 숨겨진 레이어를 사용할 수 있습니다. float를 제거하면 얻은 높이가 pcj만큼 높아집니다.

여기서 중요한 점은 IE에서는 float 레이아웃이 괜찮지만 Firefox에서는 0이라는 것입니다.

위는 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 관련 항목에 더 관심을 가져주세요. 내용 PHP 중국어 웹사이트!

관련 기사

슬라이드 아웃 바닥 글Apr 09, 2025 am 11:50 AM

마크 업이라는 매혹적인 새 사이트가 방금 시작되었습니다. 태그 라인 : Big Tech가 당신을보고 있습니다. 우리는 큰 기술을보고 있습니다. 위의 위대한 일. 그만큼

좋아하는 페이지Apr 09, 2025 am 11:47 AM

나는 다른 날 JavaScript로 RSS 피드를 구문 분석하는 것에 대해 게시했습니다. 또한 RSS 설정에 대해 Feedbin이 어떻게 핵심인지에 대해 이야기했습니다.

Codepen Gutenberg Embed Block for Sanity.io를 재현합니다Apr 09, 2025 am 11:43 AM

Chris Coyier의 WordPress의 Gutenberg 편집기 구현에서 영감을 얻은 Sanity Studio를위한 미리보기로 사용자 정의 코드펜 블록을 만드는 방법에 대해 알아보십시오.

CSS와 라인 차트를 만드는 방법Apr 09, 2025 am 11:36 AM

라인, 바 및 파이 차트는 대시 보드의 빵과 버터이며 모든 데이터 시각화 툴킷의 기본 구성 요소입니다. 물론 SVG를 사용할 수 있습니다

접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다Apr 09, 2025 am 11:30 AM

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.

SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법Apr 09, 2025 am 11:29 AM

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

PHP 템플릿에 대한 후속 조치Apr 09, 2025 am 11:14 AM

얼마 전, PHP 템플릿에 대해 PHP (기본적으로 HEREDOC 구문)에 대해 게시했습니다. 나는 문자 그대로 그 기술을 사용하여 슈퍼 기본을 사용합니다

부트 스트랩 구성 요소가있는 모달 이미지 갤러리 생성Apr 09, 2025 am 11:10 AM

다른 사진을보기 위해 탐색으로 더 큰 버전의 이미지를 열어주는 웹 페이지의 이미지를 클릭 한 적이 있습니까?

See all articles

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.