Hintergrund radial Farbverlauf ist in Firefox verschoben

Question

Ich habe ein Dropdown-Menü, wo ich die Elemente der zweiten Ebene durch eine "ausgefallene Linie" (<hr> Tag) getrennt. Es funktioniert in allen Browsern außer Firefox, in denen die Trennzeichen außerhalb des Dropdown-Menüs verschoben werden.

Ich habe überall nach Kodierungsfehlern gesucht, aber ich kann keine finden.

Kann mir bitte jemand helfen?

Mein CSS-Code:

hr.fancy-line { 
    border: 0; 
    height: 1px; 
} 

hr.fancy-line:before { 
    top: -0.5em; 
    height: 1em; 
} 

hr.fancy-line:after { 
    content:''; 
    height: 0.5em; 
    top: 1px; 
    background: initial;  
} 

hr.fancy-line:before, 
hr.fancy-line:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
} 

hr.fancy-line, 
hr.fancy-line:before { 
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0))); 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); 
    background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); 
    background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); 
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%); 
} 

Answer 1

Sie verfehlten die position: relative den Mutter, weil die position: absolute wird die inmediate relativ Eltern (falls nicht, Ansichtsfenster) angebracht werden:

https://jsfiddle.net/ks2gtpab/

hr.fancy-line { 
    border: 0; 
    height: 1px; 
    position:relative; 
} 

Die anderen Browser scheint im Verhalten falsch zu sein, auch wenn Sie Denken Sie, der Fehler ist in Firefox, weil Sie top: 1px setzen, und diese Berechnung wird von der relativen Eltern oder Ansichtsfenster vorgenommen werden, wenn es nicht relative Eltern sind.