IE8 표준 모드에서 \'margin: 0 auto;\' 요소가 중앙에 배치되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?-CSS 튜토리얼-php.cn

IE8 표준 모드에서 \'margin: 0 auto;\' 요소가 중앙에 배치되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Linda Hamilton

풀어 주다： 2024-11-26 05:29:09

원래의

690명이 탐색했습니다.

Why Doesn't

HTML 문서 유형 선언 및 "margin: 0 auto;" 동작 Internet Explorer 8

Internet Explorer 8에서 웹사이트를 테스트할 때 "margin: 0 auto;"라는 문제가 발생할 수 있습니다. 속성이 예상대로 요소를 중앙에 배치하지 않습니다. 이는 다음 HTML 코드의 경우 특히 분명합니다.

<div>

로그인 후 복사

이 코드는 Firefox 3, Opera, Safari, Chrome, IE7 및 IE8 호환 모드를 포함한 대부분의 브라우저에서 버튼을 올바르게 중앙에 배치하지만, IE8 표준 모드에서는 실패합니다.

이 동작을 이해하려면 HTML 문서 유형 선언의 역할을 이해하는 것이 중요합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

로그인 후 복사

과 같은 문서 유형 선언을 문서 시작 부분에 추가하면 문제를 해결하고 IE8 표준 모드에서 버튼을 올바르게 중앙에 배치할 수 있습니다. 이는 문서 유형 선언이 사용되는 HTML 버전을 지정하여 브라우저가 올바른 표준에 따라 코드를 해석할 수 있도록 하기 때문입니다.

"margin: 0 auto;" 동작의 경우 일반적으로 브라우저는 요소의 "표시" 속성에 따라 이를 다르게 처리합니다. 분석은 다음과 같습니다.

"display: block"이 설정된 경우:
요소의 너비는 명시적으로 정의되지 않아 "margin: 0 자동"이 됩니다. ;" 속성은 요소를 상위 컨테이너 내에서 수평으로 중앙에 배치합니다.
"display: inline"이 설정된 경우:
요소에는 블록 수준 너비가 없으며 "여백: 0 자동;" 속성에는 아무런 영향이 없습니다.

위 내용은 IE8 표준 모드에서 \'margin: 0 auto;\' 요소가 중앙에 배치되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!