Mozilla 한국 커뮤니티

hyeonseok wrote:IE6 는 표준 모드와 호환모드 두가지가 존재 합니다.
페이지가 표준모드로 랜더링 될지 호환모드로 랜더링 될지는 문서 상단의 DOCTYPE 선언으로 구별합니다.

http://msdn.microsoft.com/library/defau ... ements.asp

따라서 IE6 에서 적절한 DOCTYPE 선언을 할 경우 표준으로 랜더링 되기 때문에 Firefox 와 같은 결과를 보이게 됩니다. DOCTYPE 이 없거나 잘못된 경우, IE5.5 이하의 경우와 같이 300px 로 랜더링 되게 됩니다.

IE6.0 과 FF 에서 모두 360px로 표시됩니다. 
IE3.0 아예 배경색을 읽지를 못하네요. 그래서 사이즈를 재지 못햇음.
IE4.01에서는 320px로 표시됩니다.
IE5.01에서도 320px로 표시.
IE5.5에서도 320px로 표시.

/*초기화*/
*{
	margin: 0px;
	padding: 0px;
	border: 0px;
}
/*웹표준 박스 전체크기를 표시하기 위한 설정*/
#cc{
	background: #C0C0C0;
	width: 360px;
	height: 160px;
}
/*실제 사용할 박스*/
#center2{
	background: #9ACD32;
	border: 10px solid #FFE4E1;
	margin: 10px;
	padding: 10px;
	width: 300px;
	height: 100px;
}

<div id="cc">
<div id="center2">gggg</div>
</div>

spaceplus wrote: 웬지 박스모델에 대한 설명이 틀리지 않았나 의심스럽네요.
오늘 테스트 해본 결과입니다.

Code: Select all

IE6.0 과 FF 에서 모두 360px로 표시됩니다. 
IE3.0 아예 배경색을 읽지를 못하네요. 그래서 사이즈를 재지 못햇음.
IE4.01에서는 320px로 표시됩니다.
IE5.01에서도 320px로 표시.
IE5.5에서도 320px로 표시.

spaceplus wrote: 이렇게 하면 IE6.0에서는 두개 박스가 웹표준에서 말하는 CSS모델을 보듯이 잘 포현되는데요. FF에서는 두 박스가 동일한 위쪽 마진을 가지더라구요. 바깥 박스는 마진, 패딩, 보더가 초기화되어 있는데 말이죠. 안쪽 박스의 마진이 왜 외부로 상속할가요?
위에서 아래로 상속하는거 아닌가요. 이제껏 이렇게 생각햇는데 오늘 보니까 FF에서는 그렇게 해석안하네요.

음...이상하군요..제가 가지고 있는 IE5.01 과 IE5.5 에서는 MSDN 에 있는 설명과 동일하게 둘다 300px 의 폭으로 나옵니다. 어떻게 테스트 하셨나요? 저는 stand-alone IE 를 같은 Windows XP SP2 OS에서 테스트 했습니다. 간혹가다가 개별 OS에 설치된 IE와는 다르게 작동한다는 얘기가 있기는 합니다.

normal flow block 상하의 margin 은 collapse 됩니다. 자세한 내용은 CSS2 스펙에 있습니다.
http://www.w3.org/TR/REC-CSS2/box.html# ... ng-margins

10.1 Definition of "containing block"

The position and size of an element's box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

1. The containing block (called the initial containing block) in which the root element lives is chosen by the user agent.
2. For other elements, unless the element is absolutely positioned, the containing block is formed by the content edge of the nearest block-level ancestor box.
3. If the element has 'position: fixed', the containing block is established by the viewport.
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static', in the following way:
1. In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.
2. In the case that the ancestor is inline-level, the containing block depends on the 'direction' property of the ancestor:
1. If the 'direction' is 'ltr', the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.
2. If the 'direction' is 'rtl', the top and right are the top and right edges of the first box generated by the ancestor, and the bottom and left are the bottom and left content edges of the last box of the ancestor.

spaceplus wrote:제가 가지고 있는 IE3.0 ~ 5.5 를 가지고 직접 테스트 햇습니다. 운영체제는 2000 pro구요. Mac OS 면 몰라도 윈도우 OS들마다 또 다르게 표현된다면 표준이 어떻게 시행될수 있을가요? 후흣~~

spaceplus wrote:

10.1 Definition of "containing block"

The position and size of an element's box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

1. The containing block (called the initial containing block) in which the root element lives is chosen by the user agent.
2. For other elements, unless the element is absolutely positioned, the containing block is formed by the content edge of the nearest block-level ancestor box.
3. If the element has 'position: fixed', the containing block is established by the viewport.
4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static', in the following way:
1. In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.
2. In the case that the ancestor is inline-level, the containing block depends on the 'direction' property of the ancestor:
1. If the 'direction' is 'ltr', the top and left of the containing block are the top and left content edges of the first box generated by the ancestor, and the bottom and right are the bottom and right content edges of the last box of the ancestor.
2. If the 'direction' is 'rtl', the top and right are the top and right edges of the first box generated by the ancestor, and the bottom and left are the bottom and left content edges of the last box of the ancestor.

여기 말대로 하면 내부에 있는 박스는 부모를 참조 하면서 생성된다고 합니다.

hyeonseok wrote: 동일한 디자인적인 적용도 중요하지만 본질적으로 표준을 적용하는 가장 큰 이유는 동일한 디자인을 보여주려는 것이 아니라 어떠한 환경에서도 최소한의 접근성을 보장하는 것입니다.