Question

我想设置由:active标记表示的按钮的<a>状态。 <a>标记有一个内部（因为我想在此按钮上添加一个图标）。

我注意到除了Internet Explorer 8之外的所有内容都正确地触发了:active状态。在IE 8中，似乎（<a>的填充）周围的区域触发:active状态，但直接点击中的文字时，不会触发:active状态。

有没有办法在不诉诸Javascript的情况下解决这个问题？

HTML

<a class="button" href="#">
 <span>Add a link</span>
</a>

CSS

a.button { some styles }
a.button:active { some other styles }

Answer 1

是的，非常复杂的解决方案（并且仍然不完美），但是：如果你没有将链接文本包装在中，而只是使用作为放置位置您的背景图片并将其置于<a>内，然后（大部分）停止阻止:active州。

测试页面：http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

当然，覆盖的区域仍然会捕获点击事件，因此当用户点击该区域时，他们将看不到:active状态。这在以前的情况略有改善。

Answer 2

Tricky：单击<a>时，IE 8似乎没有将标记注册为活动状态。（IE 6和7都很好。你发现了回归！）

但是，它会将标记注册为有效标记。如果您可以将要更改为:active状态的所有样式应用于，那么IE 8将继续播放，例如

a.button:active,
a.button span:active/* This selector is for IE 8 only */ {
    color: #009;
    font-weight: bold;
}

测试页面：http://www.pauldwaite.co.uk/test-pages/2769392/

但是只适用于链接的任何样式在IE 8中都不会改变。在上面的示例中，文本在单击时会更改颜色，但下划线不会，因为下划线样式仅附加到链接（通过浏览器的默认样式），而不是。

Answer 3

我有同样的问题，最后想出来了：您需要<a>标记中的目标，即在<a>标记中添加“href”属性：

<a id="logonButton" class="button submit" href="@Url.Action("Index", "Home")"><span>Log On</span></a>

在所有IE版本中都像魅力一样。：）

Answer 4

也许：

a.button span { ...
a.button span:hover { ...

会起作用吗？

Answer 5

或者，您可以将放在<a>之外。这似乎有效。

HTML

<span><a class="button" href="#">
 Add a link
</a></span>

测试页面：http://www.pauldwaite.co.uk/test-pages/2769392/2/

Answer 6

今天有同样的问题。

尝试设置

z-index: -1; position: relative;

关于跨度。

这是我在阅读这篇文章后想出来的。

我实际写了一个很长的答案，有示例代码等等等。但是当缩进css代码时，IE有一个阻塞并崩溃了..

Answer 7

我想出了一个使用jquery修复ie8 bug的解决方案。对于这样一个小错误，它的资源使用不合理，但我当时正在使用的应用程序已经使用了很多jQuery，所以没关系。

HTML

<a href="#" class="btn"><span>Button</span></a>

CSS

a.btn:active,
a.btn.ie8:hover { /* <-ie8 hack */
    /* mouse down state a.btn style */
}

a.btn:active span,
a.btn.ie8:hover span { /* <-ie8 hack */
    /* mouse down state a.btn span style */
}

Jquery的

$(document).ready(function() {

    var isIE8 = ($.browser.msie == true && $.browser.version == "8.0") ? true : false;

    if (isIE8 === true) {
        $("a.btn").bind({
            mousedown: function() {
                $(this).addClass('ie8');
            },
            mouseleave: function() {
                $(this).removeClass('ie8');
            }
        });
    }
});

Answer 8

您可以使用以下方法修复它：

$('.yourspan').mousedown(function(){
    $(this).parents('.youranchor:first').css("background-position","bottom");   
}); 
$('.yourspan').mouseup(function(){
    $(this).parents('.youranchor:first').css("background-position","top");  
});

<a> with an inner <span> not triggering :active state in IE 8</span></a>

HTML

CSS

8 个答案:

HTML

CSS

HTML

HTML

CSS

Jquery的