IE8：如果单击子项，则活动选择器不起作用

Question

您好，我正在为客户制作一些按钮，他需要 IE8 支持。我面临的问题是，当我点击按钮（标签）时，它可以工作并且按钮显示为已推送/激活，但是当我点击子元素（span）时，它却没有。

这是 IE8 的问题还是我遗漏了什么？如果没有 javascript，有没有办法解决这个问题？

这是jsfiddle和来源

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
    html,
    body {
        padding: 100px;
        margin: 0;
        height: 100%;
        font-family: arial;
    }

    div {
        min-height: 80px;
    }
    /* BUTTONS */

    .rebrand-btn {
        display: table;
        table-layout: fixed;
        outline: none;
        text-decoration: none;
        padding: 17px 38px;
        border-bottom: 2px solid #497b0d;
        -mox-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background: #509e2f;
        /* Old browsers */

        background: -moz-linear-gradient(left, #97d700 1%, #509e2f 100%);
        /* FF3.6+ */

        background: -webkit-gradient(linear, left top, right top, color-stop(1%, #97d700), color-stop(100%, #509e2f));
        /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(left, #97d700 1%, #509e2f 100%);
        /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(left, #97d700 1%, #509e2f 100%);
        /* Opera 11.10+ */

        background: -ms-linear-gradient(left, #97d700 1%, #509e2f 100%);
        /* IE10+ */

        background: linear-gradient(to right, #97d700 1%, #509e2f 100%);
        /* W3C */

        filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d700', endColorstr='#509e2f', GradientType=1)";
        /* IE6-9 */
        /*
        -webkit-transition: border 100ms linear 0s;
        -moz-transition: border 100ms linear 0s;
        -o-transition: border 100ms linear 0s;
        transition: border 100ms linear 0s;
        */
        /* transitions */
    }

    .rebrand-btn,
    .rebrand-btn > * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .rebrand-btn:hover {
        background: -moz-linear-gradient(left, #d2d755 1%, #509e2f 100%);
        /* FF3.6+ */

        background: -webkit-gradient(linear, left top, right top, color-stop(1%, #d2d755), color-stop(100%, #509e2f));
        /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(left, #d2d755 1%, #509e2f 100%);
        /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(left, #d2d755 1%, #509e2f 100%);
        /* Opera 11.10+ */

        background: -ms-linear-gradient(left, #d2d755 1%, #509e2f 100%);
        /* IE10+ */

        background: linear-gradient(to right, #d2d755 1%, #509e2f 100%);
        /* W3C */

        filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d755', endColorstr='#509e2f', GradientType=1)";
        /* IE6-9 */
    }

    .rebrand-btn:active {
        border-top: 2px solid transparent !important;
        border-bottom: 0px !important;
    }
    /*
    .rebrand-btn[disabled=disabled] {
        opacity: 0.5;
        pointer-events: none !important;
    }
    */

    .rebrand-btn > span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 16px;
        color: #fff;
    }

    .rebrand-btn.sm {
        padding: 12px 19px;
    }

    .rebrand-btn.sm > span {
        font-size: 14px;
    }

    .rebrand-btn.ico {
        padding: 9px 20px;
    }

    .rebrand-btn.ico > span {
        padding-right: 5px;
    }

    .rebrand-btn.ico > i {
        display: table-cell;
        width: 32px;
        height: 32px;
        background: blue;
    }
    </style>
</head>

<body>
    <div>
        <a class="rebrand-btn" href="#"><span>This is a test button</span></a>
    </div>
    <br>
    <div>
        <a class="rebrand-btn" href="#" disabled="disabled"><span>This is a test button</span></a>
    </div>
    <br>
    <div>
        <a class="rebrand-btn ico" href="#"><span>This is a test button</span><i></i></a>
    </div>
    <br>
    <div>
        <a class="rebrand-btn sm" href="#"><span>This is a test button</span></a>
    </div>
</body>

</html>

Answer 1

在 Internet Explorer 中，:active 伪类不会通过父元素向上传播。您可以在此处看到更好地说明问题的简化案例：http://jsfiddle.net/zx7w346u/2/.

此问题已在 Internet Explorer 的继任者 Microsoft Edge 中修复。

IE8：如果单击子项，则活动选择器不起作用

IE8 :active selector not working if child is clicked

css

internet-explorer-8