IE와 Mozilla_CSS/HTML 간의 레이아웃 차이를 해결하려면 !important를 사용하세요.

"Web Designer" 페이지를 디자인할 때, IE 및 기타(Mozilla, Opera 등) 브라우저에서 메인 메뉴의 표시 효과가 2px 정도 차이가 나는 문제가 있습니다. 스크린샷은 다음과 같습니다.

IE에서의 효과

Mozilla Firefox의 효과

이 문제는 IE의 상자 간 거리 해석 버그로 인해 발생합니다(onestab의 "플로팅 모델 문제" 참조). 나는 " Table vs. CSS--A Battle of life and death "를 번역하기 전까지 이 문제를 해결하지 못했습니다. 저자의 팁이 해결책을 찾는 데 도움이 되었습니다. !important를 사용하세요.

!important는 CSS1에 정의된 구문으로, 지정된 스타일 규칙의 적용 우선순위를 높이는 데 사용됩니다(W3.org 설명 참조). 정의 끝에 작성되는 문법 형식 { sRule!important }(예:

box{color:red !important;})

가장 중요한 점은 IE에서는 이 구문을 지원한 적이 없지만 다른 브라우저에서는 지원한다는 것입니다. 따라서 이를 사용하여 IE 및 기타 브라우저에 대해 다양한 스타일을 정의할 수 있습니다. 예를 들어

.colortest { 
border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;
} 

과 같은 스타일을 정의합니다.

Mozilla에서 탐색할 때 !important의 우선순위를 이해할 수 있으므로 #60A179 색상이 표시됩니다.

IE에서 탐색할 때 !important의 우선순위를 인식하지 못하여 #00F 색상이 표시됩니다.

보시다시피 !important를 사용하면 IE 브라우저와 IE가 아닌 브라우저에 대해 서로 다른 스타일을 설정할 수 있습니다. IE가 아닌 브라우저 스타일 뒤에 !important를 추가하면 됩니다. 따라서 위에서 언급한 내 홈페이지의 2px 표시 차이는 쉽게 해결할 수 있습니다.

PADDING-TOP: 11px !important
PADDING-TOP: 9px; !important는 확실히 CSS 레이아웃을 위한 강력한 도구가 될 것입니다. 기억하고 숙지하시기 바랍니다. :)