个人中心
gpt4 book ai didi

css - IE8 :active selector not working if child is clicked

转载 作者：太空宇宙 更新时间：2023-11-03 17:30:02 24 4
gpt4 key购买 nike

您好，我正在为客户制作一些按钮，他需要 IE8 支持。我面临的问题是，当我点击按钮(标签)时它起作用并且按钮显示为已推送/激活但当我点击子元素(跨度)时它不起作用。

这是 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>

最佳答案

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

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

enter image description here

关于css - IE8 :active selector not working if child is clicked，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30781524/

24 4 0
文章推荐： c# - .Net Core 无法从 appsettings.json 读取连接字符串
文章推荐： c# - 我在 Unity 中使用了 C# 秒表类，但它只返回 00 :00:00
文章推荐： python - 如何通过ajax将django模型查询集发送到模板？
文章推荐： Python请求: Anyway to download just the body of a get response?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com