Question

我正在尝试创建一个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: ""时，标签才会显示。有什么解决办法吗？查看下面的屏幕截图-

Answer 1

解决此问题的方法是进行一些CSS更改并创建特定于Firefox的媒体查询。

Chrome和Edge要求absolute定位，而left:0要求.optgroup:before, .optminus:before类；和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);
        }
    }

:: before在Firefox中也会影响optgroup标签

1 个答案: