CSS haslayout에 대한 철저한 이해

CSS, 특히 IE에서의 CSS 렌더링을 더 잘 이해하고 싶다면 haslayout을 철저히 이해해야 하는 개념입니다. IE에서의 대부분의 디스플레이 오류는 haslayout으로 인해 발생합니다.

해즈레이아웃이 무엇인가요?
　 Haslayout은 Windows Internet Explorer 렌더링 엔진의 내부 구성 요소입니다. Internet Explorer에서 요소는 크기를 계산하고 자체 콘텐츠를 구성하거나 상위 요소를 사용하여 크기를 계산하고 콘텐츠를 구성합니다. 이러한 두 가지 서로 다른 개념을 조정하기 위해 렌더링 엔진은 true 또는 false일 수 있는 hasLayout 속성을 사용합니다. 요소의 hasLayout 속성 값이 true이면 해당 요소에 레이아웃이 있다고 말합니다. 요소에 레이아웃이 있으면 자체 요소와 가능한 하위 요소의 크기 계산 및 위치 지정을 담당합니다. 간단히 말해서, 이는 이 작업을 수행하기 위해 상위 요소에 의존하는 대신 요소 자체와 해당 콘텐츠를 유지 관리하는 데 더 많은 시간을 소비해야 함을 의미합니다. 따라서 일부 요소에는 기본적으로 레이아웃이 있습니다. 요소에 "레이아웃이 있습니다" 또는 "레이아웃을 가져옵니다"라고 하거나 요소에 "레이아웃이 있습니다"라고 말하면 해당 Microsoft 관련 속성 hasLayout이 true로 설정되어 있음을 의미합니다. "레이아웃 요소"는 기본적으로 레이아웃이 있는 요소이거나 특정 CSS 속성을 설정하여 레이아웃이 있는 요소일 수 있습니다. HTML 요소에 haslayout 속성이 있는 경우 이 요소의 haslayout 값은 true여야 합니다. haslayout은 읽기 전용 속성이므로 되돌릴 수 없습니다. IE 개발자 도구 모음을 통해 IE의 HTML 요소에 haslayout이 있는지 확인할 수 있습니다. IE 개발자 도구 모음에서 haslayout이 있는 요소는 일반적으로 "haslayout = -1"로 표시됩니다. 메이 , 버튼, 파일 , 선택, 텍스트 영역, 필드 세트
　* 선택 윤곽
　* 프레임셋, 프레임, iframe
　모든 요소가 기본적으로 배치되면 성능과 메모리 사용량에 해로운 영향을 미칠 수 있습니다.
　haslayout을 활성화하는 방법은 무엇입니까?
대부분의 IE 표시 오류는 요소의 haslayout 속성을 활성화하여 수정할 수 있습니다. CSS 크기 속성(너비/높이) 등을 설정하여 요소의 haslayout을 활성화하여 "레이아웃을 갖습니다". 아래와 같이 다음 CSS 속성을 설정하면 됩니다.
　 * 디스플레이: 인라인 블록
　 * 높이: (자동을 제외한 모든 값)
　 * 부동 소수점: (왼쪽 또는 오른쪽)
-rl
　 * 줌: (보통을 제외한 모든 값)
　 Internet Explorer 7에는 몇 가지 추가 속성이 있습니다( 전체 목록):
　 *
min-height
: (모든 값)
　 *
max-height
: ( * min-width: (없음을 제외한 모든 값) * max-width: (없음을 제외한 모든 값) * 오버플로: (표시되는 값을 제외한 모든 값) * Overflow-x: (표시되는 값을 제외한 모든 값) 모든 값)
　 *
overflow-y: (표시되는 값을 제외한 모든 값) 　 * 위치: 고정
　 여기서 Overflow-x 및 Overflow-y는 속성입니다. 브라우저에서 아직 널리 지원되지 않는 CSS3 상자 모델에서.
　
인라인 요소(기본값은 범위와 같은 인라인 요소 또는 디스플레이:인라인;이 있는 요소)의 경우 　너비 및 높이만 IE5.x 및 IE6 이상 버전의 특수 모드에서 hasLayout을 트리거합니다. IE6의 경우 브라우저가 표준 호환 모드에서 실행 중인 경우 인라인 요소는 너비 또는 높이 속성을 무시하므로 이 경우 너비 또는 높이를 설정하면 요소가 레이아웃을 갖도록 주문할 수 없습니다.
　Zoom은 항상 hasLayout을 실행할 수 있지만 IE5.0에서는 지원되지 않습니다. 　"레이아웃"이 있는 요소가 다음과 같이 표시되는 경우: 동시에 인라인, 해당 동작은 표준에 언급된 인라인 블록과 매우 유사합니다. vertical-align에 따라 일반 텍스트처럼 단락에서 수평으로 연속적으로 정렬됩니다.
영향력, 크기는 내용에 따라 적응적으로 조정될 수 있습니다. 이는 또한 IE/Win에서만 인라인 요소가 문제가 적은 블록 수준 요소를 포함할 수 있는 이유를 설명할 수 있습니다. 왜냐하면 다른 브라우저에서 display: inline은 IE/Win과 달리 인라인을 의미하기 때문입니다. 인라인 요소에 레이아웃이 있으면 여전히 인라인을 의미합니다. 레이아웃이 인라인 블록이 됩니다.
　haslayout 문제 디버깅 및 해결
IE에서 웹페이지가 비정상적으로 작동하는 경우 haslayout을 활성화하여 문제가 있는지 확인할 수 있습니다. 일반적인 방법은 요소의 CSS에 Zoom:1을 설정하는 것입니다. Zoom:1은 대부분의 경우 기존 환경에 영향을 주지 않고 요소의 해시 레이아웃을 실행하기 때문에 사용됩니다. 문제가 사라지면 기본적으로 Haslayout의 원인이라고 판단할 수 있습니다. 그런 다음 해당 CSS 속성을 설정하여 이 문제를 해결할 수 있습니다. 가장 먼저 고려해야 할 사항은 요소의 너비/높이 속성을 설정한 다음 다른 속성을 고려하는 것입니다.
　IE6 이하 버전의 경우 일반적인 방법은 Holly hack이라고 하는데, 이 요소의 높이를 1%(높이:1%;)로 설정하는 것입니다. 이 요소의 오버플로 속성이 표시로 설정된 경우 이 메서드는 작동하지 않습니다. 또는 IE의 조건부 주석을 사용하세요.
　IE7의 경우 가장 좋은 방법은 요소의 최소 높이를 0(min-height:0;)으로 설정하는 것입니다.
　haslayout 문제로 인한 일반적인 버그
　IE6 이하 버전의 이중 여백 부동 버그
　버그 수정: display:inline;
　IE5-6/win의 3픽셀 오프셋 버그
　버그 수정: _height:1%; -부 버그
　버그 수정: _height:1%;

위 내용은 CSS haslayout에 대한 철저한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!