2011-12-31 1 views
1

여기에 완벽하게 작동하는 내 코드가 있습니다.CSS - 이미지 스프라이트 : 활성이 작동하지 않습니다. ie

<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div> 

모든 아이디어를하십시오 : 활성은 단순히이는 HTML입니다

a.Button span { 
background: transparent url('images/form_sprite.png') no-repeat 0 0; 
display: block; 
height:45px; 
line-height: 30px; 
padding: 7px 0 5px 20px; 
color: #fff; 
background-position: 0 -44px; 
} 

a.Button { 
background: transparent url('images/form_sprite.png') no-repeat top right; 
display: block; 
float: left; 
height: 45px; 
margin-right: 6px; 
padding-right: 27px; 
text-decoration: none; 
font-family: Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold; 
} 

a.Button:hover span { 
background-position: 0 -136px; 
} 

a.Button:hover { 
background-position: right -90px; 
} 

a.Button:active span { 
background-position: 0 -225px; 
} 

a.Button:active { 
background-position: right -181px; 
} 

발생하지 않습니다?

+0

어떤 버전의 IE? 6 - 7 - 8 - 9? – TH1981

+0

모든 버전 @Aninemity –

+0

: 색상 변경과 같은 : active에 다른 효과를 추가하면 IE에서 실행됩니까? – TH1981

답변

1

당신의 CSS에서 a.Button:activea.Button span:active으로 변경하십시오. 그건 :active CSS를 발사하는 것 같아요. 그리고 여전히 크롬에서 작동합니다.

+0

이것은 어느 정도는 작동하지만, 이것은 슬라이딩 도어 유형 수업이므로 두 반쪽이 있습니다 - 당신이 말한 것과 바꿔서 어느 쪽을 클릭해도 작동하지만 두 가지를 동시에 발사하지는 않습니다 - 악몽이 –

0

그래, :active psuedo-class는 사용자가 해당 개체에서 을 직접 클릭 할 때만 발생합니다. 이 경우 링크. 하위 개체 (기간)를 클릭하면 링크의 활성 이벤트가 실행되지 않습니다.

Aninemity가 말한대로 span:active (적절한 방법)에 스타일을 적용 할 수 있습니다. 그러나 IE6/7에서는 :active이 링크에만 실행됩니다. IE6/7 지원이 필요하면 범위를 없애기위한 몇 가지 방법을 찾아야 할 것입니다.