배경 속성과 a 및 a:hover 의 의사 클래스 조합이 IE6의 일반 논리에서 작동하지 않는 이유는 무엇입니까? IE6 이하 브라우저에서 이 문제가 발생하는지 테스트했으며 이 문제가 자주 발생하여 다른 방법을 사용하여 이를 대체했습니다.
탐색을 예로 들어 보겠습니다. 다음 코드는 CSS의 논리와 완전히 일치합니다. 이론상으로는 "a.nav_1 배경 위치 지정"과 결합된 " a:hove background image "가 있어야 예상되는 결과를 얻을 수 있습니다. 비정상적으로 배경 이미지만 표시됩니다. 배경 좌표가 없습니다. 데모 (비교를 위해 IE6 및 IE6 이상의 브라우저를 사용하십시오).
*{여백:0;패딩:0;}
.header{ 위치: 상대; 너비: 745px; 높이: 225px; url(bg.jpg) 반복 없음;}
/*항해*/
#nav p{ 위치:절대; 왼쪽:0; 너비:100%;}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{배경:url(bg.jpg) 반복 없음 0 0;}
/*탐색 상태: IE6 이하 브라우저는 호환되지 않으며, 그 외 브라우저는 정상입니다*/
#nav a.nav_1{너비:80px;배경 위치:0 -213px;}
#nav a.nav_2{너비:86px;배경-위치:-80px -213px;}
#nav a.nav_3{너비:227px;배경-위치:-166px -213px;}
#nav a.nav_4{너비:92px;배경-위치:-393px -213px;}
#nav a.nav_5{너비:98px;배경-위치:-485px -213px;}
#nav a.nav_6{너비:162px;배경 위치:-583px -213px;}
이전에 사용한 솔루션은 상태를 통해 해당 선택기를 추가하는 것이었습니다. 이 방법은 코드가 너무 부풀려진 느낌이 들고, 코드광으로서 데모를 받아들이기 어렵습니다.
/*내비게이션 통과 상태: 이전 솔루션*/
#nav a.nav_1:호버,
#nav a.nav_1{너비:90px;배경 위치:0 -211px;}
#nav a.nav_2:호버,
#nav a.nav_2{너비:86px;배경-위치:-80px -213px;}
#nav a.nav_3:호버,
#nav a.nav_3{너비:227px;배경-위치:-166px -213px;}
#nav a.nav_4:호버,
#nav a.nav_4{너비:92px;배경-위치:-393px -213px;}
#nav a.nav_5:호버,
#nav a.nav_5{너비:98px;배경-위치:-485px -213px;}
#nav a.nav_6:호버,
#nav a.nav_6{너비:162px;배경 위치:-583px -213px;}
이론적으로는 "a.nav_1" 선택기가 "a:hover"보다 높지만 !important를 추가하려고 했더니 IE6에서 일반 Demo 가 표시되는 것을 발견했습니다.
다른 브라우저를 테스트해보면 부작용은 없는 것 같습니다. 이번에는 haslayout과 관련이 없는 것 같지만, 그 원인과 결과도 헷갈립니다.
/*내비게이션 통과 상태: 현재 솔루션*/
#nav a.nav_1{너비:80px;배경-위치:0 -211px!중요;}
#nav a.nav_2{너비:86px;배경-위치:-80px -213px!중요;}
#nav a.nav_3{너비:227px;배경-위치:-166px -213px!중요;}
#nav a.nav_4{너비:92px;배경-위치:-393px -213px!중요;}
#nav a.nav_5{너비:98px;배경-위치:-485px -213px!중요;}
#nav a.nav_6{너비:162px;배경-위치:-514px -213px!중요;}
ytzong에서 제공하는 솔루션은 매우 좋습니다 ~ 배경 약어를 사용하지 않는 것이 여전히 장점이 있는 것 같습니다. IE6의 배경 추가 논리에는 실제로 문제가 있습니다. 테두리 속성도 테스트했는데 데모에는 이 문제가 없습니다.
*{여백:0;패딩:0;}
.header{ 위치: 상대; 너비: 745px; 높이: 225px; url(bg.jpg) 반복 없음;}
/*항해*/
#nav p{ 위치:절대; 왼쪽:0:180px;}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{배경-이미지:url(bg.jpg) 배경-반복:no-repeat;}
/*탐색 상태: IE6 이하 브라우저는 호환되지 않으며, 그 외 브라우저는 정상입니다*/
#nav p a.nav_1{너비:80px;배경-위치:0 -213px;}
#nav p a.nav_2{너비:86px;배경-위치:-80px -213px;}
#nav p a.nav_3{너비:227px;배경-위치:-166px -213px;}
#nav p a.nav_4{너비:92px;배경-위치:-393px -213px;}
#nav p a.nav_5{너비:98px;배경-위치:-485px -213px;}
#nav p a.nav_6{너비:162px;배경-위치:-583px -213px;}
더 좋은 방법이 있을지 모르겠네요~