GWT 프로젝트에서 문제를 디버깅하는 동안 요소 위로 마우스를 가져 가면 해당 크기가 툴팁과 그늘진 영역에서 화면의 크기와 위치를 나타내는 것을 보았습니다. 그러나 해당 요소를 선택하고 "계산 된 스타일"특성을 볼 때 너비는 같지만 높이는 도구 설명과 다릅니다 (0 임).Chrome 개발자 도구에서 요소 크기 툴팁과 계산 된 스타일 크기가 다른 이유는 무엇입니까?
이렇게하면 다음과 같은 질문을하게됩니다. Chrome이 툴팁에 표시하는 크기는 얼마입니까? 계산 된 스타일이 0 일 때 왜 0이 아닌가?
또한 요소의 상자 모델을 표시하는 "메트릭"영역은 높이가 0 인 크기를 표시합니다. 여기
내가 얘기하고 무엇에 대한 이미지입니다 : http://img845.imageshack.us/img845/1766/96984162.png그것은 당신이 당신의 문서 타입에 오류가있을 가능성이 -이 요소가 비정상적인 박스 모델 렌더링 될 수 있습니다. W3C 유효성 검사를 통해 마크 업을 실행하려고 시도 했습니까? doctype 앞에 나타나는 코드가 있습니까?
실수로 print_r()을 코드의 시작 부분에 두었을 때 나는이 문제를 겪었습니다.
doctype을 변경하려고 시도했지만 4.01 transitional이 아닌 다른 doctype은 레이아웃을 완전히 깨뜨린 것처럼 보였다. 슬퍼. – mikebutler
툴팁에는 검사 된 요소의 유효 offsetWidth/offsetHeight가 표시되는 반면 계산 된 스타일에는 요소의 계산 된 스타일 값이 표시됩니다. WebKit은 "display : inline"요소에 대해 "auto"대신 "0px"를 잘못 반환합니다. 나는 여전히 당신의 "display : table-cell"요소를 가지고 있다고 생각한다.
Webkit 버그가 수정되었으므로 케이스의 너비/높이 계산 값이 "자동"이어야합니다. –
와우, 좋은 질문입니다. dev 도구에서 버그 또는 잡아당하는 것 같아 두렵습니다. 스크린 샷에서 정적 인 HTML입니까? 아니면 일부 자바 스크립트가이 효과를 일으킬 수 있습니까? (즉, 높이가 클라이언트 측으로 변경되었거나 서버에서 렌더링 후 변경되지 않았습니까?) – Jeroen
JavaScript를 통해 높이가 확실히 클라이언트 측을 변경하고 있습니다. JavaScript는 GWT를 통해 컴파일됩니다. 아마 Chrome에 대한 버그를 신고하고 그들이 말하는 것을 볼 것입니다. – mikebutler