CSS : IE9의 <a> 요소에서 액티브가 올바르게 작동하지 않습니다.

Question

HTML과 CSS를 사용하여 사이트를 만들고 있는데, 클릭하면 "애니메이션"이 표시되고 자바 스크립트가 활성화 될 화살표가 있어야합니다.

#slevo 
{ 
    display:block; 
    height:51px; 
    width: 60px; 
    border: 10px outset gray; 
} 

#slevo:active 
{ 
    display:block; 
    height:51px; 
    width: 60px; 
    border: 10px inset gray; 
} 


#sdesno 
{ 
    display:block; 
    height:51px; 
    width: 60px; 
    border: 10px outset gray; 
} 

#sdesno:active 
{ 
    display:block; 
    height:51px; 
    width: 60px; 
    border: 10px inset gray; 
} 

= "sdesno"

는 여기에 자신의 CSS의

여기에 관심의

<table> 
    <tr> 
     <td class="td_bezIvice"> 
      <a id="slevo" href="javascript:levo()"> <img src="left.png" width="60" alt="стрелица лево"/></a> 
     </td> 

     <td> 
      <table> 
       <tr> 
        <td class="gal"><img id="leva" src="blank.jpg" alt="лева слика"></td> <td class="gal"><img id="srednja" src="blank.jpg" alt="средња слика"></td> <td class="gal"><img id="desna" src="blank.jpg" alt="десна слика"></td> 
       </tr> 

      </table> 
     </td> 
     <td class="td_bezIvice"> 
      <a id="sdesno" href="javascript:desno()"> <img src="right.png" width="60" alt="стрелица десно"/> </a> 
     </td> 

    </tr> 

</table> 

는 ID = "slevo"와 <a>하고 ID로 <a> :

여기에 코드의 관련 부분입니다

다른 브라우저에서 화살표를 클릭하면 테두리가 처음부터 삽입되어 시각적 피드백을 제공합니다. 그러나 IE 9에서는 테두리 스타일이 변경되지 않습니다. 테두리 스타일은 파이어 폭스, 오페라, 크롬이 보여주는 것과 다르다.

어떻게 해결할 수 있습니까?

업데이트 : IE9 호환 모드로 실험을 해봤는데 활성화되어 있고 화살표를 클릭하면 경계가 시작될 때까지 다른 위치를 클릭 할 때까지 인세 트로 변경됩니다. 반면에 호환성 모드에서 서버의 이미지를 내부 테이블에 삽입하는 JavaScript는 실패합니다. 저는 배열에 이미지를 추가하고 마지막을보기 위해 zero에 대해 naturalHeight를 검사하기 위해 do while 루프를 사용하고 있습니다. F12 모드에서 배열 요소의 naturalHeight가 높을지라도 높이는 0으로 검출됩니다.

Answer 1

IE가 표준 모드에서 문서를 렌더링하도록 doctype을 설정했는지 확인하십시오. 나는 당신이 다른 브라우저와 IE9 사이에서보고있는 불일치를 추측하고 있습니다. IE가 쿼크 모드를 사용하는 결과입니다.