Question

我对网站有一个奇怪的问题。我使用CSS3转换（翻译）来生成＆＃34;按下＆＃34;当他们处于:active状态时按钮效果。尽管我使用了所有供应商前缀（包括-ms-）和＆amp;成功的所有浏览器，但IE 11以外的所有浏览器中的一切都运行良好。没有前缀的标准。有没有办法在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。这个错误是resolved in 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规范或选择器级别3模块都没有说明:active状态是否也适用于元素的父级：

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

- CSS 2.1规范，Section 5.11.3

对于哪些元素可能成为文档语言或实现特定限制：活动或获取：焦点... 选择器不定义元素的父级是否为“：active”或“：hover” '也处于那种状态。

- 选择器等级3，Section 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/

enter image description here

更新答案

在下面的评论中进一步讨论该问题后，您似乎正在使用translate(x, y)来抵消元素，而不是 impress 元素。您应该没有任何问题，因为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中按原样运行，无需额外工作：

enter image description here

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

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

transform: translate( 10px, 10px );

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

小提琴（预计会被打破）：http://jsfiddle.net/dsy9g2j2/5/

原始答案

听起来你可能正在使用translateZ来减少:active状态期间元素的大小;如果是这种情况，您需要确保直接将perspective应用于该元素，或to its ancestral tree some place。没有透视，浏览器无法确定翻译的效果应该是多么明显。

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

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

enter image description here

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

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

1 个答案:

最终答案

更新答案

原始答案