Question

Box-shadow无法在Microsoft Edge浏览器上运行。我已经在以下部分实施了以下内容:(我不是我在顶部的白痴）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这是我的index.html文件的正文：

<body>
    <div id="wrapper">
        <header>
            <div id="header-inner">
                <div id="logo">
                    <a href="index.html">body</a>
                </div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a id="sign-in" href="#">Sign in</a>
                    <span id="sign-in-menu">
                        <div class="arrow-up"></div>
                        <div class="arrow-up-top"></div>

                        <div class="form">
                            <form action="login.php" method="get">
                            <input type="text" placeholder="Username" name="inputUser">
                            <input type="password" placeholder="Password"
                            name="inputPass">
                            <!-- <input type="checkbox" name="checkbox" id="checkbox" class="css-checkbox">
                                <label for="checkboxG1" class="css-label">Remember me</label> COOOKKiiieeesss -->
                            </form>
                        </div>

                        <div class="submit-area">
                            <input type="submit" value="Sign up">
                        </div>
                    </span>
                </li>
                <li><a href="register.html">Sign up</a></li>
            </ul>
        </div>
    </header>
</div>

悬停CSS框阴影代码：

header li > span input[type=submit]:hover {
    -webkit-box-shadow: 0 0 0 1px #383e46;
    -ms-box-shadow: 0 0 0 1px #383e46;
    box-shadow: 0 0 0 1px #383e46;
}

Answer 1

你可以看看这个： Box Shadow For Edge

您需要一个额外的元素，但它可以使用过滤器。

仅限8及以上（Egde版本）您可以查看：box-shadow property

Answer 2

将css更改为：

header li > a > span input[type=submit]:hover {
    -webkit-box-shadow: 0 0 0 1px #383e46;
    -ms-box-shadow: 0 0 0 1px #383e46;
    box-shadow: 0 0 0 1px #383e46;
}

或

header li span input[type=submit]:hover {
    -webkit-box-shadow: 0 0 0 1px #383e46;
    -ms-box-shadow: 0 0 0 1px #383e46;
    box-shadow: 0 0 0 1px #383e46;
}

您在>和li之间添加了span，但span永远不会直接出现在代码结构中的li之后。相反，您需要在我的第一个示例中指定css中的a标记，或者删除>以删除特殊情况，如第二个示例中所示。

框阴影在微软边缘不起作用

2 个答案: