Firefox 마진 최고 실패의 이유와 해결책

이 설명을 번역해야 하는 이유는 무엇인가요? CSS2를 번역한 분이 계시는데, 보니까 너무 어렵네요(저만 그런 게 아니라 번역자님 정말 대단하십니다!). xhtml이 많을수록 혼란이 더 커집니다.
지금은 많은 문제가 전혀 문제라고 할 수 없다고 생각합니다. 예를 들어 황소 칼로 닭을 죽이는 것은 불가능하지 않지만 근본 원인이 잘못되면 불합리하고 부적절합니다. 겉모습이 잘못된 것이다. 겉모습부터 문제를 해결하기 시작하면 늘 혼란스러울 수밖에 없다.
이 설명에서 '여백 축소'는 다음을 의미합니다. 2개 이상의 상자 모델 사이의 인접한 여백 속성(관계는 인접하거나 중첩될 수 있음)(비어 있는 콘텐츠, 패딩 영역, 테두리 또는 명확한 분리 방법을 사용할 수 없음) 하나의 여백으로 결합되어 표현됩니다.
CSS2.1에서는 가로 여백이 축소되지 않습니다.
일부 상자 모델에서는 세로 여백이 축소될 수 있습니다.
1. 일반 문서 흐름에서는 2개 이상의 블록 수준 상자 모델의 인접한 세로 여백이 축소됩니다.
최종 마진 값 계산 방법은 다음과 같습니다.
a. 모두 양수 값인 경우 가장 큰 값을 취합니다.
b. 모두 양수 값이 아닌 경우 절대값을 뺀 다음, 양수값에서 최대값.
c. 양수값이 없으면 절대값을 취한 다음 0에서 최대값을 뺍니다.
참고: 인접 상자 모델은 DOM 요소에서 동적으로 생성될 수 있으며 인접 또는 상속 관계가 없습니다.
2. 인접 모델과 모델 중 하나가 플로팅되면 플로팅 상자 모델과 해당 하위 요소 사이에서도 수직 여백이 축소되지 않습니다.
3. 오버플로 속성이 설정된 요소와 해당 하위 요소 사이의 여백은 접히지 않습니다(오버플로 값이 표시되는 경우 제외).
4. 절대 위치 지정(위치:절대)이 설정된 박스 모델의 경우 수직 여백은 하위 요소 사이에서도 축소되지 않습니다.
5. display:inline-block이 설정된 요소의 경우 하위 요소 사이에서도 세로 여백이 축소되지 않습니다.
6. 박스 모델의 상단 및 하단 여백이 인접해 있는 경우 이를 통해 여백이 무너질 수 있습니다. 이 경우 요소의 위치는 인접한 요소의 여백이 축소되었는지 여부에 따라 달라집니다.
a. 요소의 여백과 상위 요소의 margin-top이 함께 축소되는 경우 상자 모델의 border-top에 대한 테두리 정의는 해당 상위 요소의 테두리 정의와 동일합니다.
b. 또한 모든 요소의 상위 요소는 여백 접기에 참여하지 않거나 상위 요소의 margin-bottom만 계산에 참여합니다. 요소의 테두리 상단이 0이 아닌 경우 요소의 테두리 상단 위치는 이전과 동일합니다.
지우기 작업이 적용된 요소의 여백 상단은 블록 수준 상위 요소의 여백 하단과 함께 축소되지 않습니다.
접힌 부분으로 가려진 요소의 위치는 접힌 다른 요소의 위치에 영향을 미치지 않습니다. 테두리-상단 테두리 위치는 이러한 요소의 하위 항목을 배치할 때만 필요합니다.
7. 루트 요소의 세로 여백은 축소되지 않습니다.
부동 블록 수준 요소의 여백 하단은 해당 동위 요소가 지워지지 않는 한 부동 다음 유입 블록 수준 동위 요소의 여백 상단과 항상 인접합니다.
부동 블록 수준 요소의 여백 상단은 첫 번째 부동 블록 수준 하위 요소(부동 첫 번째 유입 블록 수준 하위 요소)의 여백 상단에 인접합니다(요소에 테두리 상단이 없는 경우, 패딩 상단이 없으며 하위 요소가 지워지지 않습니다).
부동 블록 수준 요소의 하단 여백이 다음 조건을 충족하는 경우 마지막 부동 블록 수준 하위 요소의 여백 하단에 인접합니다(요소가 패딩 하단 또는 테두리를 지정하지 않는 경우). ):
a. 높이:자동이 지정됩니다.
b. 최소 높이가 요소의 실제 높이(높이)보다 작습니다.
c. 최대 높이가 요소의 실제 높이보다 큽니다( 높이)
요소의 최소값 - 높이 속성이 0으로 설정된 경우 해당 요소가 소유한 여백은 인접하며 테두리 상단과 테두리 하단도 없고 패딩 상단과 패딩 하단도 없습니다. height 속성은 0 또는 auto일 수 있습니다. 인라인 상자 모델(라인 상자)을 포함할 수 없으며 플로팅된 모든 하위 요소(있는 경우)의 여백은 인접합니다.
요소가 소유한 여백이 축소되고 지우기 작업을 사용하는 경우 해당 요소의 margin-top은 바로 다음 형제 요소의 인접한 여백과 함께 축소되지만 결과적으로 해당 요소의 여백은 해당 요소의 여백과 일치하지 않게 됩니다. 여백. 블록 ​​수준 상위 요소의 여백 하단 축소.
접기 작업은 패딩, 여백 및 테두리 값을 기반으로 합니다(즉, 브라우저가 이러한 모든 값을 구문 분석한 후) 접힌 여백 계산은 사용된 다른 여백 값을 덮어씁니다.

<div id="d0" style="background-color:#333333;height:500px;"> 
<br style="line-height:0;"/> 
//不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示 
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
</div>

Firefox 마진톱 실패의 원인과 해결 방법에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!