IEとEdgeの前後の擬似要素

Question

私はこのページで作業しています：link to page。
h2私はbeforeとafterの要素を持っています。 IEでは、これらの画像はあまりにも大きく、オリジナルの幅と高さはありません。私がこの問題を解決しようとしているとき、FFとChromeではすべてがさらに悪化しています。
エッジのものは少し違っています - 画像を小さくする方法を考えましたが、beforeの要素は内側にあります。h2のテキストです。
ここでは例です：

（FFからとChrome）ノーマル

少し奇妙（エッジから）




CSSコード（IEから）だから、クレイジー：

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

@ankitは言うとおり、width: 80%を削除するとIE上で正しく機能しています。また、supportsの部分を削除してEdgeの問題を解決しました。

Answer 2

前後左右の位置を左端と右端にしてみてください。 問題が解決しない場合は、ピクセルを％にしてみてください。

Answer 3

別のアプローチ（あなたが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-invalidクラスが自動的にフォーム要素とフォームに追加されますが、フォームには追加されますが、フォームには追加されません。