IE quirks mode a:hover style 问题答案

【问题标题】：IE quirks mode a:hover style issueIE quirks mode a:hover style 问题
【发布时间】：2012-01-28 00:15:49
【问题描述】：

我有一个跨度，我只想在光标悬停在它上面时显示它。要查看我的期望，请删除“href”属性并在非 IE 浏览器中尝试。

<!-- <!DOCTYPE html> -->
<html>

<head>
    <style>
        .container {
            color: orange;
        }
        a.anchor {
            text-decoration:none;
            display: inline-block;
            cursor: default;
        }
        a.anchor:hover span {
            visibility: visible;
        }
        a.anchor span {
            visibility: hidden;
        }       
    </style>
</head>

<body>
    <div class="container">
        <a class="anchor" href="#">
            <span>XXXXXXXXX</span>
        </a>
    </div>
</body>

</html>

请注意，doctype 已被注释掉以将 IE 置于 quirks 模式。在这种模式下，IE a:hover 不适用于列出的 CSS（可见性更改器），除非锚点包含“href”属性。

但是，通过添加“href”，IE 会使用浏览器默认的锚样式覆盖 span 的样式。在我的应用中，容器 div 可能具有动态样式，因此很难覆盖锚的样式...

所以我的问题是：

1) 我只能使用怪癖模式。无论如何，我是否可以在不使用 href 属性的情况下以我想要的方式获得 :hover 行为？

2）如果上一个问题的答案是否定的，那么删除所有浏览器默认锚样式的最佳方法是什么？

我真的希望不要为此编写脚本，但如果有任何脚本解决方案，请告知！

提前感谢大家。

【问题讨论】：

button.onMouseOver = function(){ document.getElementById("thespan").style.display = 'inline'; }; button.onMouseOut = function(){ document.getElementById("thespan").style.display = 'none'; };
什么是没有 href 属性的锚点？通常您只会这样做来标记页面中的位置（带有 ID），这些位置通常不会显示。
尝试将名称属性添加到您的a 标记。在 HTML4 中，标签必须具有 href 或 name 属性，所以我只能猜测您的 a 实际上只是显示为普通的 div，直到您添加所需的属性。尝试将!important 添加到您的样式中，看看这是否足以覆盖默认值。
@animuson：据我所知，HTML 规范中描述的锚点是一个a 元素没有一个href 属性。具有该属性的是链接。（这很烦人，因为a 确实代表“锚点”，但主要用于创建超链接......）
这里使用的原因是在 IE7- :hover 中不支持其他元素类型。

标签： html css internet-explorer hover anchor

【解决方案1】：

试试

    a.anchor:hover span {
        display: inline-block;
    }
    a.anchor span {
        display: none;
    }

包含示例http://jsfiddle.net/gHKsY/4/

【讨论】：

这不是我所需要的。当光标不在锚点上方时，锚点需要完全不可见。
没关系，只需在锚点上将背景设置为透明即可：}
只使用了颜色以便您进行测试。
我的目标真的是能够摆脱“href”，因为它弄乱了我的风格......
那么您肯定必须使用 JavaScript 解决方案，抱歉。查看上面的 Tims 评论。