특정 계산 된 CSS 스타일의 원인을 확인하십시오.

Question

웹 페이지에서 높이 값이 633px 인 <div>이 있습니다. 캐스 케이 딩 스타일 시트, 인라인 여부에 관계없이 설정되지 않으며 자바 스크립트에서도 설정되지 않습니다. 내 코드에서 어디에서나 검색했지만 번호 633은 어디에도 표시되지 않습니다. 내가 원하는 높이 인 style="height: 420px;"을 설정하여이 문제를 해결할 수 있지만 IE는 633px로 이것을 대체하여 다른 브라우저에서도 얻을 수 있습니다. Google 크롬과 Firefox/Firebug에서 div의 실제 내용이 633 픽셀 근처에 있지 않다는 것을 확인했습니다. 이 계산 된 높이의 이유가 무엇인지 알아낼 수있는 방법이 있습니까? 완성을 위해 다음은 Google 크롬에서 <div>의 스타일 속성으로보고하는 내용입니다.

Computed Style 
background-color: white; 
display: block; 
float: left; 
height: 633px; 
margin-left: 30px; 
margin-top: 20px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
width: 830px; 

Inline Style Attribute 
margin-left: 30px; 
margin-top: 20px; 

#overview 
background-color: white; 
float: left; 
padding: 0px; 
width: 830px; 

#overview, #overviewempty 
margin-top: 9px; (is crossed out) 

div 
display: block; 

미리 감사드립니다.

편집는 :

질문에 사업부는 두 사업부의, font-size: 16px;에서 텍스트의 한 줄에 하나, 그리고 367px의 높이 사업부가 포함되어 있습니다.

또 다른 편집 :

좋아, 나는이 원인을 알아 냈어. 메인 div에 포함 된 두 번째 div에는 하나의 이미지가 포함되고 div는 해당 이미지의 오른쪽에 떠 다니며 position: relative; top: -335px;을 사용합니다. Internet Explorer는이 요소가 비어있는 공간을 유지합니다. 주위에?

최종 편집는 :

그것을 해결!

<div id="overview"> 
    <div>Some text> 
    <div> 
    <img src="someImage.jpg"> 
    <div style="float: right; position: relative; top: -335px;"> 
     <div style="position: absolute; top: 0px; left: 0px; background-color: white; width: 365px;"> 
     Some floating contents 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Internet Explorer 용 IE Developer Toolbar을 설치하십시오. 때로는 인생을 훨씬 쉽게 만듭니다. 편집 : 새 버전의 IE에는 F12 키를 눌러 액세스 할 수있는 개발자 도구가 기본적으로 포함되어 있습니다.

Answer 2

가 요소의 높이가 보통이다 : 나는 최종 HTML :) 메인 이미지 아래에있는 공백을 제거됩니다 position: absolute와 두 번째 DIV에 position: relative에 떠있는 DIV의 내용을 포장이 같이 보입니다 내용에 따라 결정됩니다. 633px 상당의 텍스트 또는 기타 자료가 있습니까?

계산 된 스타일이 반드시 모든 스타일 시트 또는 자바 스크립트에서 오는 것은 아닙니다. 렌더링 엔진이 모든 것을 계산 한 후에 스타일이 끝나는 것입니다.

Answer 3

IE 개발자 도구 모음과 동일한 맥락에서 Firebug for Firefox을보십시오.

그러면 요소에 적용되는 모든 스타일을 알려주고 어떤 스타일이 재정의되었는지 보여줍니다.

Answer 4

/어떤 속성이 서로를 무시하는 이유 findout하는 https://developer.chrome.com/devtools/docs/elements-styles

클릭에서 "계산 된 스타일"에 좋은 그래프.