Chrome과 IE의 DIV 여백 속성 차이점

이 글은 주로 Chrome과 IE의 DIV 마진 속성의 차이점을 소개합니다. 이제 공유합니다. 필요한 친구들이 참고할 수 있습니다.

갑자기 Chrome에서 레이아웃이 매우 깔끔해졌습니다. IE에서는 엉망입니다. 그 이유를 알아보기 위해 몇 가지 테스트를 해보고 여러분과 공유하려고 게시했습니다

갑자기 Chrome에서는 깔끔해 보였던 레이아웃이 IE에서는 엉망이 되었습니다. 이유를 알아보기 위해 p의 background-color 속성을 변경했습니다. 마지막으로 IE와 Chrome에서는 동일한 p의 너비가 다르다는 것을 발견했습니다. 밤에는 너무 무서워요!
그 후 테스트를 했는데요. 언제:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px; 
}

현재로서는 두 브라우저 사이에 차이가 없습니다! 전체 너비는 960px입니다.
그러나 언제:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px 10px 0px 10px; 
}

이때 Chrome이 작동을 멈춥니다. 그녀는 실제로 외부에 20px의 패딩을 추가하여 p1의 전체 너비가 960px+10px+10px=980px가 되었습니다. 그러나 IE의 p1 너비는 여전히 960px입니다. 폭에 포함 와, 크롬이 이렇게 고집스러울 줄은 몰랐네요.
테스트 후 테두리는 패딩과 동일하며 여백 값은 "너비" 외부에서 계산됩니다.
또한 float가 설정되지 않은 경우 Chrome은 p1을 위치: 절대값으로 처리하고 IE는 이를 위치: 상대값으로 처리하므로 이 블록 수준 요소의 부동소수점을 왼쪽으로 설정해 보세요.
브라우저 비호환으로 인해 일반인인 저를 매우 비참하게 만듭니다!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

CSS3에서 @keyframes 애니메이션 구현

버튼 텍스트를 클릭하면 입력 상자가 되고, 저장을 클릭하면 텍스트 구현이 됩니다.

모바일 웹 화면 적응(rem) 소개

위 내용은 Chrome과 IE의 DIV 여백 속성 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!