html - 背景径向渐变在 Firefox 中被置换

Question

我有一个下拉菜单，其中我用“花式线”(<hr> 标签)分隔二级菜单项。它适用于除 Firefox 之外的所有浏览器，在 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 将附加到中间相对父级(如果不是，视口(viewport)):

https://jsfiddle.net/ks2gtpab/

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

其他浏览器的行为似乎是错误的，即使你认为错误是在 firefox 中，那是因为你设置了 top: 1px，这个计算将由相对父级或视口(viewport)进行如果没有亲戚。