FF/IE6/IE7 배경별 CSS HACK_Experience 교환을 해결하기 위한 브라우저 호환성

인터넷이 시작된 이래로 브라우저 간의 전쟁은 결코 멈추지 않았습니다. 물론 웹페이지 개발자가 가장 어려운 부분은 사용자 경험과 사용성 표준을 충족하기 위해 통일된 효과를 위해 여러 브라우저에서 작업해야 한다는 것입니다. 지금도 IE가 여전히 세계를 지배하고 있지만 언젠가는 FF가 세계를 지배할 수 있기를 진심으로 바랍니다. 특히 Microsoft의 최신 IE7 브라우저의 CSS 호환성은 실제로 일부 웹 페이지 제작자에게 새로운 부담을 안겨주었습니다.
여러 브라우저에서 동일한 표시 효과를 얻으려면 CSS HACK을 사용해야 합니다. 물론, 이 기사에서는 가장 일반적으로 사용되는 IE6 및 FF에 대해서만 설명하고, 향후 주류가 될 IE7의 CSS HACK인 OP 및 SF에 대해서는 설명하지 않습니다. 여기에 자세히 설명되어 있습니다. 초보자들은 이 글을 읽으면 확실히 뭔가를 얻을 수 있을 것이고, 전문가들은 그냥 지나가면서 읽을 수도 있을 것입니다. 하하!

옵션 1
먼저 다음 CSS 코드를 살펴보세요.

배경색:주황색
*배경색:파란색!중요
*배경 - 색상:빨간색

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>스크립트 홈-www.jb51.net CSS 테스트</title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue!important; *background-color:red; } </style> <div class="bgc"></div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

아래에서 간략하게 설명하겠습니다. 브라우저는 이 세 가지 속성을 어떻게 이해합니까?
FF에서는 두 번째와 세 번째 속성이 인식되지 않습니다. 두 번째 속성에 !important만 추가하면 FF는 확실히 인식하지만 다른 속성이 있기 때문입니다. *앞에 붙혀서 인식하지 못합니다(IE7만 인식합니다). 따라서 읽는 내용은 background-color:orange;
IE7에서는 첫 번째, 두 번째, 세 번째 속성을 인식하지만 !important는 우선순위를 의미하므로 읽는 내용은 *Background-color:blue !important입니다. >IE6에서는 두 번째 속성은 인식되지 않지만 첫 번째와 세 번째 속성은 인식됩니다. 그러나 세 번째 속성이 첫 번째 속성을 덮어쓰기 때문에 IE6에서는 최종적으로 *배경색: 빨간색을 읽습니다.

옵션 2
먼저 다음 CSS 코드를 살펴보세요.

코드 복사 코드

배경색:주황색;
*배경색:파란색
_배경색:빨간색

css 테스트 스크립트 home-www.jb51.net<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue; _background-color:red; } </style> <div class="bgc"> </div>
[모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]
각 브라우저가 이 세 가지 속성을 어떻게 이해하는지 간단히 설명하겠습니다.
FF에서는 FF가 두 번째와 세 번째 속성을 인식하지 못하므로 background-color:orange로 읽습니다.
FF에서는 IE7에서 세 번째 속성을; IE7 속성은 인식하지 못하므로 첫 번째 속성과 두 번째 속성을 읽습니다. 그리고 두 번째 속성이 첫 번째 속성을 덮기 때문에 IE7은 결국 두 번째 속성을 읽습니다. *Background-color: blue
IE6에서는 이 세 가지 속성을 인식합니다. 세 가지 속성을 모두 읽을 수 있으며 세 번째 속성이 처음 두 속성을 덮어쓰므로 IE6은 최종적으로 :red를 읽습니다.

IE의 속성을 읽는 방법을 알아두세요. CSS HACK을 사용하는 초보자에게는 이것이 매우 중요합니다. 브라우저는 위에서 아래로 속성을 읽습니다. 즉, 동일한 속성을 위에서 아래로 읽는다는 의미입니다. 마지막으로 읽은 내용이 브라우저에 표시되도록 설정합니다. 그리고 두 번째 옵션의 "_"는 IE6에서만 인식이 되는데, 이는 대식가 같은 느낌을 줍니다. 또한 !important는 하향식 읽기 습관을 깨고 우선 순위 표시를 사용합니다. 위의 두 솔루션을 보면 FF는 일반 CSS 작성과 !important 외에는 아무것도 모르고 표준이 통일되어 있음을 알 수 있습니다.

모든 사람에게 CSS HACK을 사용하도록 권장하는 것은 아니지만 다른 사람이 작성한 CSS 코드에서 이러한 HACK을 보지 말고 그 의미를 알지 못합니다. 결국 CSS HACK을 사용하여 브라우저 간의 호환성 문제를 해결하는 것은 장기적인 해결책이 아닙니다. 새 버전의 브라우저가 나타나면 원래 작성한 CSS를 HACK할 수 있습니다. CSS HACK을 0 이하로 사용해 보세요. 좋은 레이아웃 구조는 이러한 문제를 매우 잘 해결할 수 있고, 이와 같은 웹사이트가 많이 있기 때문입니다.