CSS：active在IE9中的<a>元素上不正确工作

我正在制作一个使用HTML和CSS的网站，我需要一个箭头，当点击并激活Javascript时将显示“动画”。CSS：active在IE9中的<a>元素上不正确工作

下面是相关的代码：

<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>

这里感兴趣的是<a>使用id = “slevo” 和<a>使用id = “sdesno”

这里是他们的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; 
}

在其他浏览器中，当我单击箭头时，边框会从一开始就变为插入并提供视觉反馈。但是，在IE 9中，边框样式不会发生变化。边框风格也与Firefox，Opera和Chrome展示的不同。

我该如何解决这个问题？

更新：我做了一些与IE9兼容模式的实验，我注意到当它启用时，我点击箭头，边界会改变插入，直到我点击其他位置，当它改变回到一开始。另一方面，在兼容模式下，从服务器向内表插入图片的JavaScript失败。我使用do while循环将图像添加到数组中，并检查naturalHeight为零以查看结尾，并且检测到高度为零，尽管当我在F12模式下检查它时，数组元素具有较高的naturalHeight。

来源

2012-03-26 AndrejaKo

确保您设置了文档类型，以便IE在标准模式下呈现文档。我猜你在其他浏览器和IE9之间看到的差异是IE使用怪癖模式的结果。

来源

2012-03-26 19:13:03 Aaron

<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 // EN” “http://www.w3.org/TR/html4/strict.dtd”>我应该改变它吗？ – AndrejaKo 2012-03-26 19:14:49

@AndrejaKo Nope，这应该触发标准模式就好了。您确定在DOCTYPE之前没有HTML注释吗？ – 2012-03-26 19:18:51

@Mathias Bynens我确定。我直接从我的代码复制/粘贴该行。此外，W3验证器识别DOCTYPE的罚款。 – AndrejaKo 2012-03-26 19:23:33

CSS：active在IE9中的<a>元素上不正确工作

回答

相关问题