IE和Edge上的伪元素之前和之后

我工作的是该页面：link to page。
Inside h2我有before和after元素。在IE浏览器中，它们太大，原来的宽度和高度，这些图像不起作用。当我试图解决这个问题时，在FF和Chrome中，一切都变得更糟。
在边缘的东西有点不同 - 我已经想出了一种方法来使图像变小，但before元素是在h2文本。
下面是例子：

正常（从FF和Chrome）

有点怪（从边缘）

所以（从IE）

CSS代码疯狂：IE和Edge上的伪元素之前和之后

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; 
    } 
}

来源

2016-07-22 ptyskju

删除h2宽度80％并尝试。 – ankit

哦，那太简单了，谢谢！ :)也删除'支持'解决问题在边缘。 – ptyskju

正如@ankit所说，删除width: 80%正在IE上正确执行。还删除部分与supports解决了与Edge的问题。

来源

2016-07-25 10:37:17 ptyskju

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

来源

2016-07-22 16:42:42 Gokul

另一种方法（假设你的HTML控件）：添加一个空的正确输入后，使用输入+跨度的目标是，在CSS：后

.field_with_errors { 
    display: inline; 
    color: red; 
} 
.field_with_errors input+span:after { 
    content: "*" 
} 
<div class="field_with_errors">Label:</div> 
<div class="field_with_errors"> 
    <input type="text" /><span></span> 
</div>

我用这种方法在AngularJS，因为它会自动添加.ng无效的类来形成元素，并将其添加到表单中，但不会添加到。

来源

2017-10-26 09:17:51

IE和Edge上的伪元素之前和之后

回答

相关问题