Javascript 样式化的锚定标记（<；a>；）在点击IE 8及更低版本后消失_Javascript_Html_Css_Internet Explorer

Javascript 样式化的锚定标记（<；a>；）在点击IE 8及更低版本后消失

javascript html css internet-explorer

Javascript 样式化的锚定标记（<；a>；）在点击IE 8及更低版本后消失,javascript,html,css,internet-explorer,Javascript,Html,Css,Internet Explorer,大家好，欢迎来到我们的社区。我遇到了一个关于html、css和Internet Explorer的bug 样式化标记用作排序过滤器。它们看起来和动作都像按钮，功能在Chrome和Mozilla上运行良好，但一旦在IE上单击这些标签，就会出现图形错误在IE9上，背景div泄漏到样式化标记的图像中（经过多次测试，我发现这是由于单击该项后布局值偏移量发生变化造成的）在IE8和IE7上，标签在单击后完全消失，它将运行onclick进程并运行finnish（我们根据css更改class=”“属性以更改

大家好，欢迎来到我们的社区。我遇到了一个关于html、css和Internet Explorer的bug

样式化标记用作排序过滤器。它们看起来和动作都像按钮，功能在Chrome和Mozilla上运行良好，但一旦在IE上单击这些标签，就会出现图形错误

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

在IE8和IE7上，标签在单击后完全消失，它将运行onclick进程并运行finnish（我们根据css更改class=”“属性以更改单击和悬停时的外观），但完成后，它将完全删除前端的视觉元素（根据布局，宽度和高度均更改为0，边距值更改为自动）。另外，仅单击的元素受影响

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

链接到最终确定的站点：

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

感谢您事先提供的帮助。我很为难，有人能帮忙吗？

HasLayout在IE8及以上版本中已消失（但您可以通过将IE置于怪癖模式或IE7 compat或其他方式触发它……：

您是否触发怪癖模式或类似模式

如果你设计一个直接的元素而不是一个伪类，你能解决你的问题吗？IE因为对在伪类之间改变显示状态感到不安而出名。此外，一旦点击一个锚点，它就不再是：link，它是：visted，元素本身的样式自然扩展到：link，：visted等。然后：hover，：active和：焦点只需覆盖“a”

这将根据元素本身设置一个基础：显示状态（内联块，无论在IE7中值多少）、宽度和高度。如果涉及到IE6和绝对定位，那么您只需接受它，然后再次在：hover上重新声明高度，但您没有提到这一点

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

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

IE8和IE9使这一点变得有趣，因为它们都不再有布局，也都不太挑剔显示状态的位置。

我看过你的代码，但不幸的是，我无法理解你想做什么！！这是不是类似于“单击特定框（你的案例中的小图像）”突出它周围的阴影？“我需要更多关于这个的信息。Plz共享…如果你去公共领域网站：在chrome或mozilla上，你可以看到标签（徽标）的功能，因为它们应该工作。想法是你选择你想找的合作伙伴（禁用或启用标签，它们充当过滤器）然后输入您的地址并单击搜索，在谷歌地图画布上显示一定距离内的所有合作伙伴。当您单击标签时，gif文件（此gif文件包含两个徽标）通过更改样式中的背景位置，根据标记类移动其视口。此功能在IE中仍然有效，但IE的布局管理器似乎更改了值（高度、重量、边距）onclick事件完成后的标签数量。导致图形错误。你我的朋友是国王。非常感谢你，你一针见血。我无法向上投票（没有足够的重复）。尽管如此，非常感谢。真不敢相信解决方案如此简单。正如你建议删除“：link”并将其更改为直元素。

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