在IE 8及更低版本上单击后，样式锚定标签(<a>）将消失

Styled Anchor tags( <a> ) disappear after being clicked on IE 8 and lower

本文关键字：lt 标签 消失 gt 样式 IE 版本 单击      更新时间：2023-09-26

祝stackoverflow社区愉快。我遇到了一个关于html、css和InternetExplorer的错误。

样式化标记被用作某种过滤器。它们的外观和行为都像按钮，功能在Chrome和Mozilla上运行良好，但一旦在IE上点击这些标签，就会出现图形错误。

在IE9上，背景div泄漏到样式标签的图像中（经过多次测试，我发现这是由于点击项目后布局值偏移量发生变化造成的。）

在IE8和IE7上，一旦点击标签，它将运行onclick过程，并最终运行它（我们根据css更改class="属性以更改单击和悬停时的外观），但在完成后，它只需完全删除前端的视觉元素（根据布局，宽度和高度都更改为0，边距值更改为auto）。P.S.只有单击的元素会受到影响。

受影响元素的2个标签示例。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link href="styles/screen.css" rel="stylesheet" type="text/css" />
 </head>   
    <body>
       <a id="virginActiveTag" class="vaOff" href="#"     onclick="tagClick('virginActiveTag')"></a>
       <a id="laFitnessTag" class="lafOn" href="#"     onclick="tagClick('laFitnessTag')"></a>  
    </body>
 </html>

其中一个元素的样式示例。

 a.vaOn:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 5px 5px #5c822a;-webkit-box-shadow: 0 0 5px 5px#5c822a;box-shadow: 0 0 5px 5px #5c822a;}
 a.vaOff:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -110px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 a.vaOff:hover {background:#fffffe url(../images/logos_va_on.gif) no-repeat 0 -8px;}

链接到最终网站：http://pru-partnerfinder.appspot.com/

我相信这与IE分配给某些元素的hasLayout属性有关。但我不完全确定。我曾尝试在onclick事件中对元素进行物理硬编码，使其恢复到原始大小，但它不接受新值，只有ie8中的margin设置正确。

谢谢你事先的帮助。我只是被难住了，有人能帮忙吗？

HasLayout在IE8及以上版本中消失了（但您可以通过将IE放入Quirks模式或IE7 compat或其他方式来触发它…）：http://msdn.microsoft.com/en-us/library/ff405844（v=vs.85）.aspx

您是否正在触发Quirks模式或类似模式？

如果你设计了一个直元素而不是伪类的样式，你能解决你的问题吗？IE曾因在伪类之间更改显示状态而感到发痒而闻名。此外，一旦点击了锚，它就不再是：link，而是：visited，并且元素本身的样式自然扩展到：link、：visiteed等。然后：hover、：active和：focus只需要覆盖"a"。

a.vaOn, a.vaOff {
  margin: 0 10px 10px 0; 
  display: inline-block;
  width: 200px;
  height: 95px;
  background: #fff url(../images/logos_va_on.gif) no-repeat 0 -8px;
  ...etc...
}
a.vaOff {
  background-position: 0 -110px;
}

这是基于元素本身设置的：显示状态（内联块，用于IE7中的任何值）、宽度和高度。如果涉及IE6和绝对定位，那么你只需要把它吸起来，然后重新声明高度：悬停，但你没有提到这一点。

a.vaOff:hover, a.vaOff:focus {
  background-position: 0 -8px;
}

我想说的是，至少在旧的IE（6,7）中，你设置尺寸和显示状态很重要，所以如果你尝试这种设置方式，问题会消失还是改变？

IE8和IE9使这一点变得有趣，因为它们都没有Layout，也都不太挑剔您所说的显示状态。

相关文章：