html - IE 怪癖模式 a :hover style issue

标签 html css internet-explorer hover anchor

我有一个跨度,我只想在光标悬停在它上面时显示它。要查看我期望的内容,请删除“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 进入怪癖模式。在此模式下,IE a:hover 不适用于列出的 CSS(可见性更改器),除非 anchor 包含“href”属性。

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

所以我的问题是:

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

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

我真的不希望为此编写脚本,但是如果有任何脚本解决方案请告诉我!

提前谢谢大家。

最佳答案

尝试

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

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

关于html - IE 怪癖模式 a :hover style issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9041789/

相关文章:

javascript - 使导航栏在CSS中占据整个页面高度

html - 最大宽度不适用于 IE 11

html - 奇怪的定位行为

css - 嵌套的 CSS3 flexboxes 不工作

javascript - 无需克隆即可拖放 div

css - 防止 <pre> 包裹在表格内

internet-explorer - Selenium Webdriver sendkeys 在 IE9.0 中不会触发 onchange 事件

css - Internet Explorer 8 背靠背 div CSS 问题

javascript - 循环浏览系列中的所有产品 |商城

javascript - 如何从offcanvas打开offcanvas