IE에서의 효과
Mozilla Firefox의 효과
이는 IE의 상자 간 거리 해석 버그로 인해 발생합니다(onestab의 "플로팅 모델 문제" 참조). 나는 "Table vs. CSS--A Battle of Life and Death"를 번역하기 전까지 이 문제를 해결하지 못했습니다. 저자의 팁이 해결책을 찾는 데 도움이 되었습니다. !important를 사용하세요.
!important는 CSS1에 정의된 구문으로, 해당 기능은 지정된 스타일 규칙의 적용 우선순위를 높이는 것입니다(W3.org 설명 참조). 구문 형식 { sRule!important }는 정의 끝에 작성됩니다. 예를 들면 다음과 같습니다.
상자{색상:빨간색 !중요;}
가장 중요한 점은 IE는 이 구문을 지원한 적이 없지만 다른 브라우저는 지원한다는 것입니다. 따라서 이를 사용하여 IE 및 기타 브라우저에 대해 다양한 스타일을 정의할 수 있습니다. 예를 들어 다음과 같은 스타일을 정의합니다.
.colortest {
테두리:20px 단색 #60A179 !중요;
테두리:20px 실선 #00F;
패딩: 30px;
너비: 300px;
}
Mozilla에서 탐색할 때 !important의 우선순위를 이해할 수 있으므로 #60A179 색상이 표시됩니다.
IE에서 탐색할 때 !important의 우선순위를 이해하지 못하여 #00F 색상이 표시됩니다.
보시다시피, !important를 사용하면 IE 브라우저와 IE가 아닌 브라우저에 대해 서로 다른 스타일을 설정할 수 있습니다. IE가 아닌 브라우저 스타일 뒤에 !important를 추가하면 됩니다. 따라서 위에서 언급한 내 홈페이지의 2px 표시 차이는 쉽게 해결할 수 있습니다.
PADDING-TOP: 11px !important;
패딩 상단: 9px;
!important는 확실히 CSS 레이아웃을 위한 강력한 도구가 될 것입니다. 기억하고 숙지하시기 바랍니다 :)
