Html ：：before也会影响Firefox中的optgroup标签

我正在尝试创建一个

select

树结构，它在Chrome中运行良好，但在Firefox中却无法正常工作。下面是Chrome和Firefox的屏幕截图

$（'.optgroup'）。单击（函数（）{
$（'option'，this）.slideToggle（）
}).children（）。单击（函数（e）{
返回false；
});
$（“optgroup”）。单击（函数（）{
//警惕（）；
$（this.toggleClass（“optplus”）；
});
选择{
填充：30px；
位置：相对位置；
宽度：250px；
}
选择选项{
填充：8px 0 8px 8px；
左：-8px；
利润率：0-8px；
}
.optgroup{
填充：8px 8px 0 8px；
背景：#f5f6f8；
保证金：0.5px 0；
宽度：100%；
}
选择权{
宽度：105%；
}
.optgroup:悬停{
光标：指针；
}
.optgroup:before，.optminus:before{
宽度：20px；
高度：20px；
位置：绝对位置；
左：0px；
}
.optgroup:之前{
内容：“；
背景图片：url（减.png）；
过渡延迟：0.2s；
}
.optplus:之前{
内容：“；
背景图片：url（Plus.png）；
过渡延迟：0.2s；
}
optgroup option:：before，optgroup option:：after{
内容：''；
左：9px；
边框颜色：#CCC；
边框样式：实心；
宽度：19px；
位置：绝对位置；
过渡：高度0.2s；
}
optgroup选项：：before{
/*顶部：-5px*/
边框宽度：0 0 2px 2px；
保证金：-11px 0；
高度：计算（3.0%+-6px）；
}
optgroup选项：：after{
边框宽度：0.2px；
/*最高：50%*/
利润率：0px0；
高度：计算（4%+6px）；
}
.optgroup:last of type选项：last of type:：after{
边界：无；
}
optgroup选项{
背景：#fafafa；
显示：块；
}
optgroup选项：第n个子项（奇数）{
背景：#fff；
}
选择选项：第一个孩子{
利润率：6px0-8px；
}
.optplus{
填充：8px 8px 6px 8px；
过渡延迟：0.2s；
}

AVM演示
信息技术
SR模上的KT
MSD
新测试
RBA租户
高级租客
另一个1
另一个2
解决这个问题的方法是对CSS进行一些更改，并创建特定于firefox的媒体查询


而Chrome和Edge则要求
绝对
定位，而
左：0
为
。optgroup:before、.optminus:before
类；和
content:“
对于
.optgroup:before
和
.optplus:before
类，firefox提出了不同的要求。下面是完整的CSS。请注意，
标记现在有一个名为
.TreeSelect

.TreeSelect {
        padding: 30px;
        position: relative;
        width: 250px;
    }       
    .TreeSelect option {
        padding: 8px 0 8px 8px;
        left: -8px;
        margin: 0 0 0 -8px;
    }
    .TreeSelect option {
        width: 105%;
    }
    .TreeSelect .optgroup {            
        padding: 8px 8px 0 8px;
        background: #f5f6f8;
        margin: 0 0 5px 0;
        width: 100%;    
    }        
    .TreeSelect .optgroup:hover {
        cursor: pointer;
    }
    .TreeSelect .optgroup:before {
        position: absolute;
        left: 1px;
        width: 122%;
        height: 20px;
    }
    .TreeSelect .optgroup:before {
        content: "";
        background-image: url(Minus.png);  
        background-repeat: no-repeat;
        transition-delay: 0.2s;
        background-position: 0px 0px;
    }
    .TreeSelect .optplus:before {
        content: "";
        background-image: url(Plus.png); 
        background-repeat: no-repeat;
        transition-delay: 0.2s;
    }
    .TreeSelect optgroup option::before, .TreeSelect optgroup option::after {
        content: '';
        left: 10px;
        border-color: #CCC;
        border-style: solid;
        width: 19px;            
        position: absolute; 
        transition: height 0.2s;
    }
    .TreeSelect optgroup option::before {           
        border-width: 0 0 2px 2px;
        margin: -11px 0 0 0;
        height: calc(3.0% + -6px);
    }
    .TreeSelect optgroup option::after {
        border-width: 0 0 0 2px;            
        margin: 0px 0 0 0;
        height: calc(4% + 6px);
    }
    .TreeSelect .optgroup:last-of-type option:last-of-type::after {
        border: none;
    }
    .TreeSelect optgroup option {
        background: #fafafa;
        display: block;
    }
    .TreeSelect optgroup option:nth-child(odd) {
        background: #fff;
    }
    .TreeSelect option:first-child {
        margin: 6px 0 0 -8px;
    }
    .TreeSelect .optplus {
        padding: 8px 8px 6px 8px;  
        transition-delay: 0.2s;
    } 
    @-moz-document url-prefix() {
        .TreeSelect .optgroup:before {
            content:revert;
            position: relative;
            left: -38px;
        }
        .TreeSelect .optgroup:before, .TreeSelect .optplus:before {
            padding-left: 40px;
            font-style: normal;
        }
        .TreeSelect optgroup option::before, .TreeSelect optgroup option::after {
            left: 10px;
        }
        .TreeSelect optgroup option::before {
            margin: -14px 0 0 0;
            height: calc(3% + -1px);
        }
    }

解决这个问题的方法是对CSS进行一些更改，并创建特定于firefox的媒体查询


而Chrome和Edge则要求
绝对
定位，而
左：0
为
。optgroup:before、.optminus:before
类；和
content:“
对于
.optgroup:before
和
.optplus:before
类，firefox提出了不同的要求。下面是完整的CSS。请注意，
标记现在有一个名为
.TreeSelect

.TreeSelect {
        padding: 30px;
        position: relative;
        width: 250px;
    }       
    .TreeSelect option {
        padding: 8px 0 8px 8px;
        left: -8px;
        margin: 0 0 0 -8px;
    }
    .TreeSelect option {
        width: 105%;
    }
    .TreeSelect .optgroup {            
        padding: 8px 8px 0 8px;
        background: #f5f6f8;
        margin: 0 0 5px 0;
        width: 100%;    
    }        
    .TreeSelect .optgroup:hover {
        cursor: pointer;
    }
    .TreeSelect .optgroup:before {
        position: absolute;
        left: 1px;
        width: 122%;
        height: 20px;
    }
    .TreeSelect .optgroup:before {
        content: "";
        background-image: url(Minus.png);  
        background-repeat: no-repeat;
        transition-delay: 0.2s;
        background-position: 0px 0px;
    }
    .TreeSelect .optplus:before {
        content: "";
        background-image: url(Plus.png); 
        background-repeat: no-repeat;
        transition-delay: 0.2s;
    }
    .TreeSelect optgroup option::before, .TreeSelect optgroup option::after {
        content: '';
        left: 10px;
        border-color: #CCC;
        border-style: solid;
        width: 19px;            
        position: absolute; 
        transition: height 0.2s;
    }
    .TreeSelect optgroup option::before {           
        border-width: 0 0 2px 2px;
        margin: -11px 0 0 0;
        height: calc(3.0% + -6px);
    }
    .TreeSelect optgroup option::after {
        border-width: 0 0 0 2px;            
        margin: 0px 0 0 0;
        height: calc(4% + 6px);
    }
    .TreeSelect .optgroup:last-of-type option:last-of-type::after {
        border: none;
    }
    .TreeSelect optgroup option {
        background: #fafafa;
        display: block;
    }
    .TreeSelect optgroup option:nth-child(odd) {
        background: #fff;
    }
    .TreeSelect option:first-child {
        margin: 6px 0 0 -8px;
    }
    .TreeSelect .optplus {
        padding: 8px 8px 6px 8px;  
        transition-delay: 0.2s;
    } 
    @-moz-document url-prefix() {
        .TreeSelect .optgroup:before {
            content:revert;
            position: relative;
            left: -38px;
        }
        .TreeSelect .optgroup:before, .TreeSelect .optplus:before {
            padding-left: 40px;
            font-style: normal;
        }
        .TreeSelect optgroup option::before, .TreeSelect optgroup option::after {
            left: 10px;
        }
        .TreeSelect optgroup option::before {
            margin: -14px 0 0 0;
            height: calc(3% + -1px);
        }
    }