html - IE 和 Edge 上的伪元素前后

Question

我正在处理此页面:link to page .
在 h2 中，我有 before 和 after 元素。在 IE 中它们太大，原始宽度和高度这些图像不起作用。当我试图解决这个问题时，在 FF 和 Chrome 中一切都变得更糟。
在 Edge 中，情况有点不同——我已经找到了一种缩小图像的方法，但是 before 元素位于 h2 文本中。
以下是示例:

正常(来自 FF 和 Chrome)

有点奇怪(来自Edge)

太疯狂了(来自 IE)


CSS 代码:

h2{/*How I am displaying h2 elem */
    text-align: center;
    width: 80%;
    margin: 45px auto 115px !important;
    text-transform: uppercase;
    color: #fff;
}
h2::before {
    content: url(img/pepper.svg);
    margin-right: 10px;
    position: relative;
    height: 50px;
}
h2::after{
    content: url(img/apple.svg);    
    margin-left: 10px;
    position: relative;
    height: 50px;
}
@supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
    h2::before {
        position: absolute;
    }
    h2::after{
        position: absolute;
    }
}

Answer 1

尝试使最左和最右前后的位置。如果它不起作用，请尝试将像素设置为 %。