：Microsoft EdgeとIEのHRの前と後：

Question

IEとEdgeの<hr>タグの周りに表示するアイコンが◆になるのは困惑します。 hrに適用するクラスを作成しましたが、これはFirefoxとChromeでうまく表示されますが、IEを動作させる方法がわかりません。

表示方法：Normal (Firefox and Chrome)。

しかし、IEとEdgeでは、アイコンは表示されません。私は彼らがまったく表示されていないと思ったが、:beforeと:afterに長いコンテンツを追加すると、その内容が<hr>の後ろに隠れているのがわかりました。

私はoverflow: visibleを試しましたが、同じままで、paddingを追加すると、hr以下のアイコンが押されました。どのような助けが大いに感謝！

CSS：

hr.fancy { 
    border: 0; 
    width: 50%; 
    border-top: 1px solid #E67E48; 
    margin: 0 auto; 
} 

hr.fancy:after, 
hr.fancy:before { 
    content: '◆ test'; 
    position: relative; 
    top: -11px; 
    color: #111; 
    font-size: 14px; 
    color: #E67E48; 
} 

hr.fancy:before { 
    float: left; 
    right: 20px; 
} 

hr.fancy:after { 
    float: right; 
    left: 20px; 
} 

JS Fiddle

Answer 1

私は私はそれはIEで<hr/>要素で動作します...間違っていたと推測し、エッジ

hr.fancy { 
 
    position: relative; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    display: block; 
 
    border-top: 1px solid #E67E48; 
 
    clear: both; 
 
    overflow:visible; 
 
} 
 

 
hr.fancy:after, 
 
hr.fancy:before { 
 
    position: absolute; 
 
    left: -20px; 
 
    color: #E67E48; 
 
    line-height: 0; 
 
    font-size: 14px; 
 
    content: '◆'; 
 
} 
 

 
hr.fancy:after { 
 
    left: auto; 
 
    right: -20px; 
 
}

<br> 
 
<hr class="fancy" />