XHTML 문서의 루트 요소 인 <html> 요소는 매우 친숙합니다. 그러나 나는 최근에 레이아웃을 만들려고 노력했으며 IE에서는 특별한 "본성"과 함께 간단한 역할이 아니라는 것을 알았습니다. 참조를 위해 요약하겠습니다.
IE6 표준 모드 :◎ 높이와 너비가 설정 되더라도 크기는 항상 전체 시야 영역을 다룹니다.
∎ 그에게 어떤 종류의 패딩과 테두리가 설정되어 있든 크기와 크기는 항상 전체 시청 영역을 채 웁니다.
margin은 무시됩니다.
◎ 초기 포함 블록은 뷰 영역 사각형의 경계 너비입니다. <html>
CSS3을 사용하여이를 표현하면 IE6에서 <html>를 특별한 높이 요소로 간주 할 수 있습니다 : 100%; 너비 : 100%; 박스 사이징 : 국경 박스; 그리고 이러한 속성은 불변입니다.
IE7 표준 모드 :IE7이 IE6에서 몇 가지 CSS 버그를 수정했지만 <HTML>에 대한 이해는 IE6보다 훨씬 복잡합니다. IE6은 이상하지만 변경할 수있는 속성은 거의 없으므로 여전히 간단합니다. IE7의 <HTML>은 더 많은 속성을 수용 할 수 있지만 알고리즘은 사양을 따르지 않으며 정직하기 때문에 IE6보다 파악하는 것이 훨씬 더 번거 롭습니다.
첫 번째는 자동 확장 기능입니다.
<html> 요소는 y 방향으로 간단하며 IE6의 일반 요소 높이에 대한 이해와 유사합니다. 컨텐츠 높이가 <html>의 높이를 초과하거나 <html>에 고정 높이가 없으면 (즉, 기본값 자동)가있는 경우 <HTML>은 자체 높이를 자동으로 확장하여 내용을 포함합니다.
그러나 X 방향에서 문제는 주로 <body>의 폭에 대한 이해에 중점을 둡니다. 두 가지 상황은 다음과 같습니다.
첫 번째 사례 : <html>의 너비는 0이 아닌 값이 아닌 값 (기본값 자동 포함) 이외의 값이라면 <body>의 너비는 다음 규칙에 따라 결정됩니다.
1. <body>의 너비가 고정 값이라면 너비가 너무 많습니다.
2. <body>의 너비가 기본값 자동 인 경우 너비는 <html>의 내용 공간을 커버합니다.
3. <body> 자체가 설정 위치 설정 : 절대 또는 디스플레이 : 인라인 (이상한 것은 플로트이지만이 항목을 만족시키지 않으면 2를 충족하지 않음)과 같은 주변 특성이 줄어들면 내용의 너비에 따라 다릅니다.
두 번째 사례 : <html>의 너비가 0이라면, 첫 번째와 3 점은 위와 동일하고, <body>의 너비가 기본 값 자동이라면, 너비는 내용에 적응하지만, <body>는 컨텐츠에 0이 될 것이며, <body>는 컨텐츠에 0이 될 것입니다. 사례 - <html>의 컨텐츠 공간은 <html>로 덮여 있습니다. <html>의 너비는 현재 0이므로 <body>의 너비도 0으로 무너집니다.
둘째, <html>의 너비와 높이 설정은 <body> (또는 <body>의 포함 블록)의 기준 백분율에 놀랍게도 영향을 미칩니다.
y 방향에서 <html>의 높이가 기본값 자동 인 경우 <body>의 높이가 백분율 값을 사용하면 무시됩니다. 그러나 일단 <html>의 높이 값이 0 인 경우에도 <body>의 높이가 적용됩니다. 그러나 이상한 점은이 백분율 높이에 대한 계산 참조가 방금 설정 한 <html>의 높이가 아니라 뷰 영역 높이의 마진 테두리 패딩 높이의 합이 <html>을 뺀다는 것입니다.
X 방향에서 너비가 기본값 자동을 사용하고 y 방향이 다르면 <body>의 비율은 무시되지 않지만 계산 기준은 여전히 y 방향만큼 이상합니다. 너비의 특정 값이 있으면 <body>에 대한 비율 너비 참조로 대체됩니다.
다시 말하지만, <body>가 위치로 설정되면 절대로 설정되면 <html>의 경계 색상이 유효하지 않습니다. 이것은 또 다른 놀라운 버그입니다.
마지막으로, 초기 포함 블록은 기본적으로 정상인 뷰포트 사각형을 채택합니다. 그러나 절대적으로 배치 된 요소가있는 포함 블록을 만드는 것은 불가능합니다. 그러나 <html>에 의해 생성 된 포함 블록은 아마도 뷰포트 사각형 일 것입니다.
너무 지저분 해요. 그것은 큰 머리 일뿐 만 아니라 그것을 분류 한 후에도 큰 머리이기도합니다. 앞으로 되돌아 본 후 명확하게 볼 수 있는지 모르겠습니다. IE7 AH IE7 ... 나는 당신을 매우 사랑한다고 말하고 싶습니다 ...
IE5 및 Quirks 모드◎ <html> 및 <bod> 모든 너비와 높이 설정은 무시되며 시청 영역으로 가득합니다.
<html> 패딩 및 마진은 허용되지 않습니다.
padding과 마진을 수락하지만 음수 마진은 시각적 효과가 없지만 다른 해당 매개 변수를 계산할 때 가져옵니다.
<body>의 경계, 배경 및 기타 속성은 <html> 요소로 위로 전송됩니다.
초기 포함 블록은 <body>의 패딩 에지입니다.
유용성이 요약은 처음의 레이아웃 문제에서 파생됩니다. 레이아웃 문제는 그 용도 중 하나입니다. 나중에 게시물을 다시 작성하겠습니다. 그러나이 레이아웃은 몇 가지 기능 만 사용하므로 탭할 수있는 잠재력이 더 있어야하므로 천천히 연구하십시오.