CSS 스프라이트 여기에 인터넷 익스플로러 6/7/8

테스트 사이트에서 올바르게 렌더링되지 않음 :CSS 스프라이트 여기에 인터넷 익스플로러 6/7/8

http://testsitefree.nfshost.com/

IE9는 미세한

IE8 작품 : 첫 번째 이미지가 렌더링됩니다.

IE7 : 첫 번째 이미지 만 렌더링되고 드롭 다운 메뉴가 오른쪽으로 이동합니다.

IE6은 : 오직 첫 번째 이미지가 렌더링 :

파이어 폭스 3를 작동하지 않습니다.

도움 주셔서 감사합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<title> test</title> 
<style type ="text/css"> 

#test { 
       position:absolute; 
       left:710px; 
       top:0px; 
       font-family:tahoma, verdana, arial, helvetica, sans-serif; 
       font-size:10px; 
       z-index:200; 
       } 

body { behavior:url(csshover.htc); } 

#test .abab { 
       background:green; 
       } 

#test p a { 
       color: #000; 
       text-decoration:underline!important; 
       } 

#test a { 
       color:#fff; 
       text-decoration:none; 
       } 

#test a.number { 
       color:#2f343a; 
       } 

#test p a:hover { 
       text-decoration: none!important; 
       } 

ul#test { 
       list-style: none; 
       padding: 0; 
       margin: 0; 
       } 


ul#test li a { 
       display: block; 
       font-weight: normal; 
       padding: 1px; 
       background:#fff; 
       } 

ul#test li a:hover{ 
       background:#2f343a; 
       color:#fff; 
       list-style:none; 
       } 

#test li { 
       float: left; 
       position: relative; 
       width: 90px; 
       text-align: center; 
       margin-right:0px; 
       border:0px solid #ccc; 
       } 

ul#test li.current a { 
       background:#ccc; 
       } 

ul#test li.current a:hover { 
       background:#ccc; 
       } 

#test li ul { 
       display: none; 
       width:90px; 
       top: 18px; 
       left: 0; 
       font-weight: normal; 
       font-size:9px; 
       text-align:left; 
       padding-left:0; 
       margin-left:0; 
       position:absolute; 
       } 

ul#test li ul.sub1 li, ul#test li ul.sub2 li, ul#test li ul.sub3 li { 
       border-width:0px 1px 1px 1px!important; 
       width:88px; 
       } 

ul#test li ul.sub1 li a.number, ul#test li ul.sub2 li a.number, ul#test li ul.sub3 li a.number { 
       font-weight: normal!important; 
       counter-increment:image; 
       padding-left:20px; 
       background-image:url(small.jpg); 
       background-repeat:no-repeat; 
       } 


ul#test li ul.sub1 li.img1 a{ 
       background-position: 0px 0px;     
       } 

ul#test li ul.sub1 li.img2 a{     
       background-position: 0px -13px;     
       } 


ul#test li ul.sub1 li.img3 a{ 
       background-position: 0px -26px; 
       } 

ul#test li ul.sub1 li.img4 a{ 
       background-position: 0px -39px; 
       } 

ul#test li ul.sub1 li.img5 a{ 
       background-position: 0px -52px; 
       } 




#test li>ul { 
       top: auto; 
       left: auto; 
       } 

#test li:hover ul, li.over ul { 
       display: block; 
       } 

#test .sub1 li, #test .sub2 li, #test .sub3 li { 
       list-style:none; 
       text-align:left; 


       } 

</style> 

</head> 
<body> 
<ul id="test"> 

    <li><a class="abab" href="content/testpopular.php" title="Menu">TEST</a> 
     <ul class="sub1"> 
     <li class="img1"><a class="number" href="#" title="Number1">Number1</a></li> 
     <li class="img2"><a class="number" href="#" title="Number2">Number2</a></li> 
     <li class="img3"><a class="number" href="#" title="Number3">Number3</a></li> 
     <li class="img4"><a class="number" href="#" title="Number4">Number4</a></li> 
     <li class="img5"><a class="number" href="#" title="Number5">Number5</a></li> 
     </ul> 
    </li> 







</ul> 

</body> 

</html>

출처

2012-03-29 BobJIII

이전 브라우저에서는 작동하지 않는 CSS3 nth-child() 선택기를 사용하고 있습니다. 다음과 같이 요소에 개별 클래스 이름을 지정하는 것이 좋습니다.

ul#test li ul.sub1 li.sub2 a 
{ 
    background-position: 0px 0px; 
}

출처

2012-03-29 12:42:16

감사합니다. 'abcdef'라는 클래스 이름이 있다고 가정 해 봅시다. 'ul # test li ul.sub 1 a' – BobJIII

li : nth-child (2)를 li.abcdef로 바꿉니다. 내 예제에서는 ul # test li ul.sub1 li.abcdef a –

감사합니다. 원래의 게시물을 편집하여 내가 작성한 변경 사항을 표시합니다. 나는 각 요소에 클래스 이름을주고 + 당신이 제안한대로 그것을 배치했다. 모든 이미지가 사라진. 그러나 내가 어디로 잘못 갔다고 생각하니? 감사. – BobJIII

CSS 스프라이트 여기에 인터넷 익스플로러 6/7/8

답변

관련 문제