CSS转换不在活动链接中工作

Question

我对网站有一个奇怪的问题.我使用CSS3转换(translate)在按钮处于:active状态时产生"按下"效果.尽管我使用了所有供应商前缀(包括)和没有前缀的标准,但除了IE 11之外,所有浏览器都能很好地工作-ms-.有没有办法在IE 11中实现相同的效果？

#nav-bar li:not(.active-page):active {
    -webkit-transform: translate(4px, 4px);
    -moz-transform: translate(4px, 4px);
    -ms-transform: translate(4px, 4px);
    -o-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
}

Answer 1

注意:以下内容仅适用于Internet Explorer.Microsoft Edge中已解决此错误.

最终答案

如下面的评论中所述,原始(未提供)源在列表项中立即嵌套了锚点.以下应该是一个很好的例子:

<nav id="nav-bar">
    <ul>
        <li class="active-page"><a href="/home">Home</a></li>
        <li><a href="/online-resume">My Resume</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

重要的是要注意,CSS 2.1规范或Selectors Level 3模块都不会说明状态是否:active也适用于元素的父级:

CSS没有定义哪些元素可能处于上述状态,或者如何输入和保留状态.脚本可以改变元素是否对用户事件做出反应,并且不同的设备和UA可以具有指向或激活元素的不同方式.CSS 2.1没有定义':active'或':hover'元素的父元素是否也处于该状态.

- CSS 2.1规范,第5.11.3节

可能存在文档语言或实现特定限制,哪些元素可以变为:活动或获取:焦点... 选择器不定义元素的父级是否为":active"或":hover"是否也处于该状态.

- 选择器级别3,第6.6.1.2节

考虑到上述情况,我们并不期望所有浏览器不仅将:active伪类应用于当前正在激活的锚元素,而且还应用于锚的父元素.不幸的是,在这种情况下,Chrome和Firefox似乎冒泡了伪类,而Internet Explorer却没有.

虽然这不是规范实现中的错误,但我将为我们的团队打开一个Interop Bug(这些对我们来说是重要的问题).与此同时,您可以通过一些脚本创建您正在寻找的功能.我将在下面使用jQuery:

(function ($) {

    "use strict";

    $("#nav-bar").on({
        "mousedown mouseup": function () { $(this).toggleClass("pressed"); },
        /* mouseleave just incase "mouseup" happens outside of the anchor */
        "mouseleave": function () { $(this).removeClass("pressed"); }
    }, "li");

}(jQuery));

最后,只需对选择器进行一次调整,使其适用于.pressed该类:

#nav-bar li:not(.active-page):active, 
#nav-bar li:not(.active-page).pressed {
    transform: translate(10px, 10px);
}

最终结果似乎是您希望实现的效果:http:
//jsfiddle.net/jonathansampson/dsy9g2j2/8/

更新的答案

在下面的评论中进一步讨论该问题之后,您似乎正在使用translate(x, y)偏移元素而不是留下元素.您应该没有任何问题,因为Internet Explorer已经支持所有适当的功能多年.

我带头并使用了您在评论中提到的标记/ CSS:

<div id="nav-bar">
    <ul>
        <li class="active-page">One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

#nav-bar li:not(.active-page):active {
    transform: translate(10px, 10px);
}

正如您所看到的,这在Internet Explorer中按原样工作,无需额外工作:

小提琴:http://jsfiddle.net/dsy9g2j2/4/

至于为什么你没有得到这些结果,你可能遇到了一个bug.几个月前,我在translate函数中提出了一个关于右边填充y值的问题,使整个属性值无效:

transform: translate( 10px, 10px );

请注意parens中的空格 - 关闭paren之前的空格会使Internet Explorer中的值无效.幸运的是,我们的团队已经解决了这个问题,并且在将来的版本中不会出现问题,但是现在,您需要确保y值没有用空格填充.

小提琴(预计会被打破):http://jsfiddle.net/dsy9g2j2/5/

原始答案

听起来你可能正在使用它translateZ来减少元素在其:active状态期间的大小; 如果是这种情况,您需要确保直接将元素应用于元素,或者将某个透视应用于祖先树.没有透视,浏览器无法确定翻译的效果应该有多明显.

.button:active {
    transform: perspective(300px) translateZ(-1em);
}

最终结果在所有浏览器中都是一致的,包括Internet Explorer 11:

小提琴:http://jsfiddle.net/jonathansampson/dsy9g2j2/3/