我正在尝试创建一个 select 树结构，它在 Chrome 中运行良好，但在 Firefox 中出现问题。以下是 Chrome 和 Firefox 的屏幕截图。
$('.optgroup').click(function () {
$('option', this).slideToggle()
}).children().click(function (e) {
return false;
});
$( "optgroup" ).click(function() {
//alert();
$( this ).toggleClass( "optplus" );
}); select {
padding: 30px;
position: relative;
width: 250px;
}
select option {
padding: 8px 0 8px 8px;
left: -8px;
margin: 0 0 0 -8px;
}
.optgroup {
padding: 8px 8px 0 8px;
background: #f5f6f8;
margin: 0 0 5px 0;
width: 100%;
}
option {
width: 105%;
}
.optgroup:hover {
cursor: pointer;
}
.optgroup:before, .optminus:before {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
}
.optgroup:before {
content: "";
background-image: url(Minus.png);
transition-delay: 0.2s;
}
.optplus:before {
content: "";
background-image: url(Plus.png);
transition-delay: 0.2s;
}
optgroup option::before, optgroup option::after {
content: '';
left: 9px;
border-color: #CCC;
border-style: solid;
width: 19px;
position: absolute;
transition: height 0.2s;
}
optgroup option::before {
/*top: -5px;*/
border-width: 0 0 2px 2px;
margin: -11px 0 0 0;
height: calc(3.0% + -6px);
}
optgroup option::after {
border-width: 0 0 0 2px;
/*top: 50%;*/
margin: 0px 0 0 0;
height: calc(4% + 6px);
}
.optgroup:last-of-type option:last-of-type::after {
border: none;
}
optgroup option {
background: #fafafa;
display: block;
}
optgroup option:nth-child(odd) {
background: #fff;
}
select option:first-child {
margin: 6px 0 0 -8px;
}
.optplus {
padding: 8px 8px 6px 8px;
transition-delay: 0.2s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="10" class="valid">
<optgroup class="optgroup" label="IT">
<option value="AVMDem" title="AVM Demo">AVM Demo</option>
<option value="Info" title="Information Technology">Information Technology</option>
</optgroup>
<optgroup class="optgroup" label="KT SR">
<option value="KTSR" title="KT on SR Module">KT on SR Module</option>
<option value="MSD" title="MSD">MSD</option>
<option value="newtes" title="newtesting">newtesting</option>
</optgroup>
<optgroup class="optgroup" label="Infrastructure">
<option value="RBA" title="RBA Tenant">RBA Tenant</option>
<option value="SRTent" title="SR Tenant">SR Tenant</option>
</optgroup>
<optgroup class="optgroup" label="Another">
<option value="at" title="Another1">Another1</option>
<option value="at2" title="Another2">Another2</option>
</optgroup>
</select>在 Firefox 中，::before 选择器也会影响 optgroup 标签。只有当我取消选中 content: "" 时标签才会显示。有什么解决办法吗？检查下面的屏幕截图 -
最佳答案
解决这个问题的方法是进行一些 CSS 更改并创建特定于 firefox 的媒体查询。
当 Chrome 和 Edge 请求 absolute 时定位和left:0对于 .optgroup:before, .optminus:before类(class)；和 content:""对于 .optgroup:before和 .optplus:before类，firefox 要求不同的东西。下面是完整的 CSS。请注意 <select>标签现在有一个名为 .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);
}
}
关于html -::before 也在 Firefox 中影响 optgroup 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57376123/