크롬 나는이 클래스와 사업부가 문제

: 웹 개발자 도구를 사용하여이 문제를 조사하는 경우

.header { 
    width: 100%; 
    height: 10%; 
}

, 당신은 브라우저 요소의 폭과 높이를 계산하는 방법을 볼 수 있습니다 > 854.24 X 26.05

파이어 폭스 15.01 - -> 854 X 28

사파리 5.1.7 -> 843 X 27

크롬 22.0.1229.94 m -> 951 x 36

이제 위에서와 같이 Chrome은 %를 다른 방식으로 계산합니다. 어떻게 해결할 수 있을까요? 이거 버그 야? Safari는 Webkit도 사용하지만 그 문제는 없습니다.

2012-10-19 Dragod83

보고있는 것은 뷰포트, html 및 body 태그의 크기를 기반으로 한 계산입니다. 뷰포트, 윈도우에 보이는 영역이 변경되면 html-> body-> div의 크기도 변경됩니다. 다른 도구 모음을 추가하면 해당 크기가 변경됩니다.

이것은 콘텐츠가 요소의 크기를 결정하고 더 이상 장치의 픽셀 수를 기준으로 레이아웃을 작성하지 않아야하는 "반응 형 웹 디자인"의 목적 중 하나입니다. 그러나 그것은 정말로 깊이 있고 주제를 벗어나게 될 것입니다.

2012-10-19 14:24:50 Rob

답변