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将附加到中间相对父级（如果不是，视口）：

https://jsfiddle.net/ks2gtpab/

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

其他浏览器的行为似乎是错误的，即使您认为该错误是在Firefox中，因为您设置了top: 1px，并且此计算将由相对父级或视口进行，如果没有亲戚。

背景径向渐变在Firefox中被取代

1 个答案: