1. "IE6 및 FF의 중요 사용"
.box1 {너비:150px !중요;}
.box1 {폭:250px;}
!important는 이 설정이 우선순위를 갖는다는 것을 의미합니다. IE는 !important를 만나도 오류를 발생시키지 않고 해당 기능을 무시합니다. 나중에 너비를 설정하면 IE는 나중에 다른 설정이 없으면 마지막으로 설정된 너비를 기준으로 사용합니다. 이전 !important 값인 현재 값을 사용합니다. 예: #test {width: 300px !important}IE와 FF 모두 300PX를 표시합니다. 끝에 값이 있으면 IE는 다음 값을 표시하고, FF는 앞에 !import를 붙여 값을 표시합니다!
다른 브라우저에서는 우선순위 관계로 인해 이를 중요하게 생각하므로 이전에 설정된 너비가 항상 우선합니다.
#테스트 {너비:300px;너비:400px !중요 ;}
이 문장에 표시된 결과는 IE와 FF의 너비가 모두 400PX입니다.
#테스트 {너비:300px !중요 ;너비:400px;}
이 문장의 표시 결과는 FF: 300px IE: 400px 입니다.
따라서 !important를 사용할 때는 !important가 포함된 단어를 앞에 두세요.
하지만 문제가 다시 발생합니다. IE7은 이미 !important를 인식할 수 있습니다. 아래를 참조하세요!
2. Firefox ie6 ie7용 CSS 스타일
요즘에는 대부분 해킹에 !important를 사용합니다. ie6 및 firefox 테스트에서는 정상적으로 표시되지만 ie7에서는 !important를 올바르게 해석할 수 있으므로 페이지가 원하는 대로 표시되지 않습니다. "*+html"을 사용하여 IE7에 대한 좋은 해킹을 찾았습니다. 이제 IE7에서 찾아보면 문제가 없을 것입니다.
이제 다음과 같은 CSS를 작성하세요.
#1 { 색상: #333 } /* 모즈 */
* html #1 { 색상: #666 } /* IE6 */
*+html #1 { 색상: #999 } /* IE7 */
그러면 글꼴 색상은 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #999로 표시됩니다. "+"를 사용하여 IE에서만 인식되는 CSS Hack을 구현할 수 있습니다. 일부 친구는 "_" Hack을 사용하는 것을 생각할 수도 있습니다. 이지만 IE7에서는 "_"가 인식되지 않기 때문에 구별됩니다. 그러니 +를 사용하세요
테스트 결과:
IE5.5, IE6 및 IE7 브라우저는 이를 인식할 수 있습니다.
FF2.0, Opera 9, Safari 2 브라우저에서는 이를 인식하지 못합니다.
3. IE7 해킹
IE7에서는 많은 버그가 수정되었고 일부 선택기에 대한 지원이 추가되었으므로 이제 *html {}, html>body {}, !important 등과 같은 IE를 숨기거나 표시하는 해킹이 IE7에서 작동하지 않습니다. CSS Hack은 권장되지 않으며 조건부 주석은 완벽한 필터이지만 조건부 주석은 HTML에만 표시될 수 있으므로 CSS Hack이 여전히 그 자리를 차지합니다. Nanobot은 특히 다음과 같은 IE7용 CSS 해킹을 발견했습니다.
>몸
HTML*
*+html
이 세 가지 작성 방법 중 처음 두 가지는 불법적인 CSS 작성 방법으로 표준 호환 브라우저에서는 무시되지만 IE7은 그렇게 생각하지 않습니다. >body의 경우 누락된 선택자를 전역 선택자 *로 대체합니다. 즉, *>body로 처리되며, 이러한 현상은 > 선택자뿐만 아니라 +, ~ 선택자에서도 나타납니다. html*의 경우 html과 * 사이에 공백이 없기 때문에 CSS 구문 오류이기도 하지만 IE7에서는 이를 무시하지 않고 여기에 공백이 있다고 잘못 인식합니다. 세 번째 유형 *+html의 경우 IE7은 html 앞의 DTD 선언도 요소라고 생각하므로 이 세 가지 방법 중 이 방법만 합법적인 CSS 작성이므로 유효성 검사기를 통과할 수 있습니다. 따라서 검증은 저자가 권장하는 해킹 사용법이기도 합니다.
Internet Explorer 6 이하
* html {}를 사용하여 html 요소를 선택하세요.
IE 7 이하
*+html, * html{}을 사용하여 html 요소를 선택합니다.
IE 7만 해당
*+html {}을 사용하여 html 요소를 선택하세요.
IE 7 및 최신 브라우저에만 해당
html>body {}를 사용하여 본문 요소를 선택하세요.
최신 브라우저에만 해당(IE 7 제외)
html>/**/body {}를 사용하여 본문 요소를 선택합니다.
4. IE와 FF는 상자 모델을 다르게 해석합니다. 코드 설명: #test { width: 650px !important;width: 648px;padding-left:2px;ground:#fff;
테스트로 표시되는 대역폭은 650px입니다.
IE Box의 전체 너비는 width+padding+border+margin의 너비의 합입니다. FF Box의 전체 너비는 width의 너비이며, padding+border+margin의 너비는 너비에 포함됩니다.
BOX{WIDTH:"300"; PADDING:"5PX";}가 있는 경우 IE의 BOX 너비는 310이어야 합니다. FF의 너비는 300이므로 BOX가 채워지면 BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}를 사용하여 BOX의 너비가 항상 300px이 되도록 해야 합니다. 늘어지는 현상은 없을 것이며, FF에서는 플로팅 레이어가 완전히 채워지지 않는 상황이 없을 것입니다.
5. Mozilla에서는 ul 태그에 패딩 값이 있지만 IE에서는 margin에만 값이 있습니다.
ul{margin:0;padding:0} 설정
6. IE는 상속관계와 부자관계를 구분하지 못합니다. 모두 상속관계입니다.
7. FF에서 div에 패딩을 설정하면 너비와 높이가 증가하지만 IE는 그렇지 않습니다(!important로 해결 가능).
8. 센터링 문제
1. line-height를 현재 div와 동일한 높이로 설정한 다음 Vertical-align: middle을 전달합니다. (콘텐츠가 줄바꿈되지 않도록 주의하세요.)
2. 수평 중심 여백: 0 자동(물론 보편적이지 않음)
3. a 태그의 콘텐츠에 스타일을 추가해야 하는 경우 display: block을 설정해야 합니다(탐색 태그에 공통).
4. FF와 IE 사이의 BOX에 대한 이해의 차이로 인해 2px의 차이가 발생하고 IE에서 부동 소수점으로 설정된 div의 여백이 두 배로 늘어나는 등의 문제가 발생합니다.\
5. UL의 다양한 성능:
ul 태그는 FF에서 기본적으로 목록 스타일과 패딩을 갖고 있으며, 불필요한 문제를 피하기 위해 미리 선언하는 것이 가장 좋습니다. (내비게이션 태그 및 콘텐츠 목록에서 흔히 발생함)
6. div의 높이를 외부 래퍼로 설정하지 마세요. 높이 적응을 위해서는 Overflow:Hidden을 추가하는 것이 가장 좋습니다.
9. 손 모양 커서는 IE에만 적용됩니다. IE와 FF 모두 인식하는 경우 커서: 포인터를 사용하세요.