Question

无法选择或访问以下属性：before＆amp; ：在Edge`s检查元素上的元素后，我们可以为此做些什么吗？

＆＃13;

.arrow_box {
    position: relative;
    background: #d43959;
    border: 4px solid #ac1f3c;
    width: 300px;
    height:200px;
    margin-top:20px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(213, 55, 55, 0);
    border-bottom-color: #d53737;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box:before {
    border-color: rgba(245, 88, 99, 0);
    border-bottom-color: #f55863;
    border-width: 26px;
    margin-left: -26px;
}

＆＃13;

<div class="arrow_box"></div>

＆＃13;

Codepen link

此代码段工作正常，但在Microsoft边缘，我无法访问此伪元素：

.arrow_box:after, .arrow_box:before

Answer 1

@supports规则允许您在Microsoft Edge上处理伪元素。

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Answer 2

以前这不是Edge支持的功能，但是从版本16开始（目前在内部版本中可用，并于2017年10月17日发布）已添加。

无法访问Microsoft Edge中的伪元素

2 个答案: