집 >웹 프론트엔드 >CSS 튜토리얼 >IE8 표준 모드에서 'margin: 0 auto' 요소를 다르게 가운데에 배치하는 이유는 무엇입니까?

IE8 표준 모드에서 'margin: 0 auto' 요소를 다르게 가운데에 배치하는 이유는 무엇입니까?

Why Does `margin: 0 auto` Center Elements Differently in IE8 Standard Mode?

Internet Explorer 8의 Margin: 0 Auto 동작 이해

Internet Explorer 8의 margin: 0 auto 속성 동작은 다음과 같습니다. 특히 다른 브라우저에서의 처리와 비교할 때 혼란스럽습니다. 이러한 불일치를 해결하기 위해 이 문서에서는 브라우저별 동작을 검사하고 관련 사양에 대한 참조를 제공합니다.

margin: 0 auto를 사용하는 중앙 버튼의 특별한 경우 IE8의 동작은 다른 브라우저와 다릅니다. 다음 코드는 이를 보여줍니다.

HTML:

<div>

Firefox, Opera, Safari, Chrome, IE7 및 IE8 호환 모드에서는 버튼이 중앙에 위치하지만 IE8 표준 모드에서는 그렇지 않습니다.

이 불일치를 해결하려면 설명된 것처럼 HTML 문서에 DOCTYPE을 추가하는 것이 좋습니다. 아래:

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

이 DOCTYPE을 사용하면 IE8 표준 모드에서는 margin: 0 auto를 사용하여 버튼을 올바르게 중앙에 배치합니다.

제기된 특정 질문에 관해:

디스플레이: 블록과 요소 너비:
- CSS2.1 사양에 따르면 "display: block" 설정은 요소의 특정 너비를 정의하지 않습니다.
- 그러나 대부분의 브라우저는 " display: block"을 사용하여 너비를 100% 또는 사용 가능한 너비로 설정합니다. 이 동작은 사양에 의해 보장되지 않습니다.
여백: 0 자동 및 요소 정렬:
- "display : block"이 설정되면 "margin: 0 auto"는 다음과 같이 다르게 해석됩니다.
- IE8 표준 모드는 입력 버튼과 같은 인라인 수준 요소에 대해 "margin: 0 auto"를 따르지 않습니다. 이는 "margin: 0 auto"가 블록 수준 요소를 중앙에 배치해야 한다는 CSS2.1 사양과 모순됩니다.

위 내용은 IE8 표준 모드에서 'margin: 0 auto' 요소를 다르게 가운데에 배치하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：