带有内部 <span> 的 <a> 未触发：IE 8 中的活动状态

Posted 2023-03-06

【中文标题】带有内部 <span> 的 <a> 未触发：IE 8 中的活动状态

【英文标题】：<a> with an inner <span> not triggering :active state in IE 8

【发布时间】：2011-02-15 16:45:07

【问题描述】：

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

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

有没有办法在不使用 javascript 的情况下解决这个问题？

html

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

CSS

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

【参考方案1】：

你可以用这个来修复它：

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

【参考方案2】：

我遇到了同样的问题，终于解决了： 您需要在<a> 标签中添加一个目标，即在<a> 标签中添加“href”属性：

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

在所有 IE 版本中都像魅力一样工作。 :)

【参考方案3】：

我想出了一个使用 jquery 修复 ie8 错误的解决方案。对于这样一个小错误，它对资源的使用不合理，但是我当时正在开发的应用程序已经使用了很多 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');
            
        );
    
);

【参考方案4】：

今天遇到了完全相同的问题。

尝试设置

z-index: -1; position: relative;

在跨度上。

这是我读完这篇文章后想到的。

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

【讨论】：

是的，它可以工作，但是 z-index -1 隐藏了锚点后面的跨度，所以如果你将背景应用于 A，你得到的只是一个具有漂亮背景的 ampy 锚点:)

【参考方案5】：

正确，非常复杂的解决方案（并且仍然不完美），但是：如果您不将链接文本包装在 <span> 中，而只是使用 <span> 作为放置背景图像和将其绝对定位在<a> 内，然后<span>（大部分）停止阻塞: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>

当然，<span> 覆盖的区域仍然会捕获点击事件，所以当用户点击那里时，他们不会看到:active 状态。比之前的情况略有改善。

【讨论】：

感谢您的所有努力，保罗。 IE 从未停止让我感到惊讶。

这个错误让我很伤心。感谢您的修复。 +1

@Liam：很高兴你找到了它，没有什么比一个不起眼且未记录的 IE 错误更糟糕的了。

【参考方案6】：

或者，您可以将<span> 放在<a> 之外。这似乎行得通。

HTML

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

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

【讨论】：

确实可以，但是需要更改的背景是图标后面的背景，需要应用于最里面的标签。在这种情况下，我需要 具有 :active 状态来更改背景，而 将具有图标背景图像。

【参考方案7】：

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

但是，它确实将<span> 标记注册为活动的。如果您可以将您想要为:active 状态更改的所有样式应用到<span>，那么 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 中都不会改变。在上面的示例中，文本在单击时会改变颜色，但下划线不会，因为下划线样式仅附加到链接（通过浏览器的默认样式），而不是 <span>。

【讨论】：

谢谢！其实我只是在IE8下试过，点击时链接的样式没有变化。

如果你点击链接的右上角，你可以获得:active状态触发，但是如果你点击链接本身，:active状态不会触发。

啊哈！ IE 8，明白了。我们发现了一个回归，6 和 7 都很好。我将相应地编辑我的答案。

是的，这将适用于您的示例。不幸的是，我首先需要这样做的原因是为了操纵背景属性，所以你的解决方法对我不起作用。我想 JavaScript 可能是要走的路。

【参考方案8】：

也许：

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

行得通吗？

【讨论】：

可以，但我需要更改外部标签（a 标签）的背景图像样式。内部标签（span）需要有不同的背景图像，不会根据悬停状态而改变。

@Adam：那你为什么不直接不使用a.button span:hover？

我没有对内部跨度应用任何 :hover 样式。 a 具有 背景（渐变），而 具有背景（图标）。当有人点击 时，我希望背景发生变化，但图标需要保持不变。