CSS：IE9の<a>要素で正しく動作しない

Question

HTMLとCSSを使用してサイトを作成しています。クリックすると「アニメーション」を表示してJavaScriptを有効にする矢印が必要です。

#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では、境界線スタイルの変更は起こりません。ボーダースタイルは、Firefox、Opera、Chromeの表示スタイルとは異なります。

どうすれば修正できますか？

更新：私はIE9互換モードでいくつか試してみましたが、有効にして矢印をクリックすると、境界線が挿入されるように変更されます。一方、互換モードでは、サーバから内部テーブルに画像を挿入するJavaScriptは失敗します。私はF12モードで調べると配列要素のnaturalHeightが高くなっていますが、配列に画像を追加してnaturalHeightをチェックしてゼロを確認しています。

Answer 1

IEが標準モードでドキュメントをレンダリングするようにdoctypeを設定していることを確認してください。私はあなたが他のブラウザとIE9の間で見ている不一致を推測していますが、これはIEがクォークモードを使用した結果です。