火狐瀏覽器取代了背景徑向漸變

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 ，因為position: absolute將附加到中間相對父級（如果不是，則為視口）：

https://jsfiddle.net/ks2gtpab/

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

其他瀏覽器的行為似乎是錯誤的，即使您認為該錯誤是在firefox中也是如此，這是因為您設置了top: 1px ，並且該計算將由相對父對象或視口（如果沒有相對父對象）進行。