背景の放射状グラデーションがFirefoxで置き換えられる

Question

私は「ファンシーライン」（<hr>タグ）で第2レベルのメニュー項目を分けたドロップダウンメニューを持っています。セパレーターがドロップダウンメニューの外に置かれているFirefoxを除くすべてのブラウザーで機能しています。

私はあらゆる場所でコーディングエラーを探しましたが、見つからないようです。

誰でも助けてください。

私のCSSコード：

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

position: absoluteがinmediate相対的な親（そうでない場合は、ビューポート）に添付されますので、あなたは、親にposition: relativeを逃した：

https://jsfiddle.net/ks2gtpab/

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

その他のブラウザでは、あなたはtop: 1pxを設定しているので、バグがFirefoxにあると思っています。この計算は、相対親がない場合は相対親またはビューポートによって行われます。