фокус радиальный градиент смещен в Firefox

Question

У меня есть выпадающее меню, где я разделял пункты меню второго уровня на «причудливую линию» (<hr> тег). Он работает во всех браузерах, кроме 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: relative к родителю, потому что position: absolute будет присоединен к относительному родителя inmediate (если нет, то окно просмотра):

https://jsfiddle.net/ks2gtpab/

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

Другие браузеры кажутся неправильными в поведении, даже если вы подумайте, что ошибка находится в firefox, потому что вы установили top: 1px, и этот расчет будет сделан относительным родителем или окном просмотра, если не существует относительного родителя.