"margin : 0 auto;"사용 Internet Explorer 8에서

81

저는 IE8의 고급 테스트를 진행 중이며 IE8의 margin: 0 auto;모든 경우에 사용하는 이전 기술이 작동하지 않는 것 같습니다 .

다음 HTML 부분은 FF3, Opera, Safari, Chrome, IE7 및 IE8 호환에서 중앙 버튼을 제공하지만 IE8 표준 에서는 제공 하지 않습니다 .

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(해결책으로 버튼에 명시적인 너비를 추가 할 수 있습니다.)

그래서 질문은 어떤 브라우저가 옳습니까? 아니면 동작이 정의되지 않은 경우 중 하나입니까?

(내 생각은 모든 브라우저가 잘못 되었다는 것입니다 . "display : block"인 경우 버튼이 100 % 너비 여야하지 않습니까?)

업데이트 : 나는 멍청하고 있습니다. 입력은 블록 수준 요소가 아니기 때문에 "text-align : center"를 사용하여 div 내에 입력해야합니다. 하지만 호기심을 위해 위의 예에서 버튼이 중앙에 위치해야하는지 안되는지 알고 싶습니다.

현상금 : 예제에서 이상한 일을하고 있다는 것을 알고 있으며 업데이트에서 지적했듯이 중앙에 정렬해야했습니다. 현상금에 대해서는 다음과 같은 사양에 대한 참조를 받고 싶습니다.

  1. "display : block"을 설정하면 버튼의 너비가 100 % 여야합니까? 아니면 정의되지 않았습니까?

  2. 디스플레이가 블록이므로 "margin : 0 auto;" 버튼을 중앙에 놓을까요?

html  css  internet-explorer-8 
— Stusmith
소스
서둘러야합니다. IE8 RTM은 오늘이며 약 2 시간 후에 다운로드 할 수 있습니다.
— Joel Coehoorn
아직 베타 버전이므로 전체 IE8 지원 부족은 출시 전에 수정해야 할 많은 사항 중 하나 일뿐입니다.
— stusmith

답변:

71

IE8의 버그입니다.

두 번째 질문으로 시작합니다. "margin : 0 auto"는 블록을 중앙에 배치하지만 블록의 너비가 부모의 너비보다 작게 설정된 경우에만 가능합니다. 일반적으로 그들은 동일하게됩니다. 그렇기 때문에 아래 예제의 텍스트가 중앙에 있지 않습니다.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

b 요소의 표시 스타일이 block으로 설정되면 너비는 기본적으로 부모 너비로 설정됩니다. CSS spec 10.3.3 일반 흐름에서 대체되지 않는 블록 수준 요소는 다음과 같은 방법을 설명합니다. .” 언급 된 평등은

'margin-left'+ 'border-left-width'+ 'padding-left'+ 'width'+ 'padding-right'+ 'border-right-width'+ 'margin-right'= 포함 블록의 너비

따라서 일반적으로 모든 자동은 ​​블록 너비가 포함 블록의 너비와 같습니다.

그러나이 계산은 대체 요소 인 INPUT에는 적용되지 않아야합니다. 대체 된 요소는 10.3.4 블록 수준, 일반 흐름에서 대체 된 요소에 포함됩니다 . 텍스트는 다음과 같습니다. " 'width'의 사용 된 값은 인라인 대체 요소에 대해 결정됩니다." 10.3.2 인라인 대체 요소 의 관련 부분 은 다음과 같습니다. " 'width'에 계산 된 'auto'값이 있고 요소에 고유 너비가있는 경우 해당 고유 너비는 'width'의 사용 된 값입니다."

CSS가 신경 쓰는 시나리오는 IMG 요소라고 생각합니다. 이 예제의 Stackoverflow 로고는 모든 브라우저의 중앙에 배치됩니다.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

INPUT 요소는 동일한 방식으로 작동해야합니다.

— 부티 옥사
소스
155

추가하면 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">문제가 해결됩니다.

— 단짝
소스
13
DOCTYPE이 없으면 IE는 자동으로 Quirks 렌더링 모드로 들어갑니다. 도움 :-)
— 앤디 맥 클러 기지
7
또한 doctype 앞에있는 것이 있으면 실패합니다 (예 : 주석, 시작 html 태그 등 ...)
— Shanimal
또한 부트 스트랩으로 모두 중단
— user956584 aug.
5

예, 사양을 백 번 읽고 옳다고 생각되는 해석이 나올 때까지 다양한 비트와 조각을 결합 할 수 있습니다.하지만 이것이 바로 브라우저 공급 업체가 한 일이며 우리가 현재 상황에 처한 이유입니다.

본질적으로 요소에 100 %의 너비를 적용 할 때 해당 부모가 블록 요소 인 경우 부모 너비의 100 %까지 확장되어야합니다. 당신은 더 이상 중심을 맞출 수 없습니다margin: 0 auto;이미 사용 가능한 너비의 100 %를 차지하므로 .

무엇이든 가운데에 맞추려면 margin: 0 auto;명시적인 너비를 정의해야합니다. 인라인 요소를 중앙 text-align: center;에 배치하려면 부모 요소에 사용할 수 있지만 부모에 다른 자식이있는 경우 원하지 않는 부작용이 발생할 수 있습니다.

— Wolfr
소스
5

양식 컨트롤은 CSS에서 대체 된 요소 입니다.

10.3.4 블록 수준, 정상 흐름에서 대체 된 요소

사용되는 'width'값은 인라인 대체 요소에 대해 결정됩니다 . 그런 다음 여백을 결정하기 위해 대체되지 않은 블록 수준 요소에 대한 규칙이 적용됩니다.

따라서 양식 컨트롤 은 100 % 너비로 늘어나서 는 안됩니다 .

그러나 중앙에 있어야 합니다. IE8의 일반적인 버그처럼 보입니다. 특정 너비를 설정하면 요소를 중앙에 배치합니다.

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
— Kornel
소스
3

buti-oxa에서 설명했듯이 이것은 IE8이 대체 된 요소를 처리하는 방식의 버그입니다. 버튼에 명시적인 너비를 추가하지 않으려면 인라인 블록으로 변경하고 내용을 가운데 정렬 할 수 있습니다.

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

인라인 블록을 지원하지 않는 이전 버전의 Mozilla (FF2 포함)에서이 작업을 수행 display: -moz-inline-stack;하려면 버튼에 추가 할 수 있습니다 .

— 사이먼 다이슨
소스
2

이것이 스펙과 관련하여 "버그"인 한; 그렇지 않습니다. 게시물 질문의 작성자로서 IE의이 동작은 사양에 따라 양식 컨트롤에서만 발생하므로 이에 대한 동작은 "정의되지 않음"입니다.

CSS 2.1은 양식 컨트롤 및 프레임에 적용되는 속성 또는 CSS를 사용하여 스타일을 지정하는 방법을 정의하지 않습니다. 사용자 에이전트는 이러한 요소에 CSS 속성을 적용 할 수 있습니다. 저자는 이러한 지원을 실험적인 것으로 취급하는 것이 좋습니다.

( http://www.w3.org/TR/CSS21/conform.html#conformance )

건배!

2

한 번 더 : 우리는 모두 IE를 싫어합니다!

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>
— 제로 별표
소스
2

위의 모든 것을 시도하고 결국 이렇게

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
— 루슬란 카리 모프
소스
1

버튼이 "display : block"인 경우 100 % 너비가 아니어야합니다.

아니요. 이는 공간에서 수직으로 유일한 것임을 의미합니다 (다른 트릭을 사용하여 다른 것을 강제로 사용하지 않는다고 가정). 그 공간의 너비를 채워야한다는 의미는 아닙니다.

이 경우 문제는 input기본적으로 블록 요소가 아니라는 것입니다. 다른 div 안에 중첩하고 여백을 설정하십시오. 하지만 지금은이를 테스트 할 IE8 브라우저가 없으므로 추측 일뿐입니다.

— 조엘 코 호른
소스
1

"margin : 0 auto"는 부모 요소에 "text-align : center"가있는 경우에만 IE의 요소를 가운데에 배치합니다.

— 크리스
소스
0
  1. 가정 margin: 0 auto 이있는 여백 설정을 무시하고,로 계산한다 무엇 이건 - 요소가 중심되어야하지만 폭이 그대로 남아 다음.
  2. <INPUT>태그를로 설정하면 display:block로 중앙에 위치해야합니다 margin: 0 auto.

자세한 내용은 시각적 서식 모델 세부 정보 -CSS 2.1 사양에서 너비 및 여백 계산 을 참조하세요. 관련 비트에는 다음이 포함됩니다.

블록 형식화 컨텍스트에서 각 상자의 왼쪽 바깥 쪽 가장자리는 포함하는 블록의 왼쪽 가장자리에 닿습니다.

과

한 줄에있는 인라인 상자의 전체 너비가이를 포함하는 줄 상자의 너비보다 작 으면 줄 상자 내의 가로 분포는 'text-align'속성에 의해 결정됩니다.

드디어

'width'가 'auto'로 설정되면 다른 'auto'값은 '0'이되고 'width'는 결과 동등성에 따릅니다.

'왼쪽 마진'과 '오른쪽 마진'이 모두 '자동'이면 사용 된 값이 동일합니다. 이것은 컨테 이닝 블록의 모서리를 기준으로 요소를 수평 중앙에 배치합니다.

— 존 아담스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.