Css对按钮的关注在Edge和Chrome中都有效，但在Firefox和IE中则不然

我在堆栈和互联网上寻找解决方案来解决

button:focus

我有creade下拉焦点菜单，比如（）

我的CSS代码：

.dropdown-button:focus > .dropdown-list {
    display: block;
    visibility: visible;
}

.dropdown-button {
        padding-left: 0;
        text-decoration: none;
        display: list-item;
        box-sizing: border-box;
        position: relative;
        list-style-type: none;
        height: 100%;
    }

.dropdown-list {
    padding-left: 0px;
    position: absolute;
    background-color: @action-dropdown;
    min-width: 180px;
    z-index: 1;
    text-align: left;
    border: 1px solid @action-border;
    display: none;
    transition: display 0.2s;
}

<button class="button button-border btn-large" ng-disabled="!hashMap['object:1'].active" ng-click="hashMap['object:1'].actionEvent()"><span class="hint">Press on me to expand extra buttons</span>
<ul class="dropdown">
    <li class="dropdown-button" tabindex="0"><span ng-bind-html="hashMap['object:1'].icon" class="icon ng-binding"><i class="fa fa-ship"></i></span><span class="block"><span ng-bind="hashMap['object:1'].name" class="text ng-binding">Vessel visit</span><i class="fa fa-caret-down"></i></span>
        <ul class="dropdown-list">
            <li class="dropdown-button">
                <button class="button button-border inline-style" ng-disabled="!hashMap['object:2'].active" ng-click="hashMap['object:2'].actionEvent()" disabled="disabled"><span ng-bind-html="hashMap['object:2'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashMap['object:2'].name" class="inline-text ng-binding">btn1</span></button>
            </li>
            <li class="dropdown-button">
                <button class="button button-border inline-style" ng-disabled="!hashMap['object:3'].active" ng-click="hashMap['object:3'].actionEvent()" disabled="disabled"><span ng-bind-html="hashMap['object:3'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashMap['object:3'].name" class="inline-text ng-binding">btn2</span></button>
            </li>
            <li class="dropdown-button">
                <button class="button button-border inline-style" ng-disabled="!hashMap['object:4'].active" ng-click="hashMap['object:4'].actionEvent()" disabled="disabled"><span ng-bind-html="hashMap['object:4'].icon" class="inline-icon ng-binding"><i class="fa fa-arrows"></i></span><span ng-bind="hashMap['object:4'].name" class="inline-text ng-binding">Replan</span><span class="hint">btn3</span></button>
            </li>
        </ul>
    </li>
</ul>

和我的HTML:

.dropdown-button:focus > .dropdown-list {
    display: block;
    visibility: visible;
}

.dropdown-button {
        padding-left: 0;
        text-decoration: none;
        display: list-item;
        box-sizing: border-box;
        position: relative;
        list-style-type: none;
        height: 100%;
    }

.dropdown-list {
    padding-left: 0px;
    position: absolute;
    background-color: @action-dropdown;
    min-width: 180px;
    z-index: 1;
    text-align: left;
    border: 1px solid @action-border;
    display: none;
    transition: display 0.2s;
}

<button class="button button-border btn-large" ng-disabled="!hashMap['object:1'].active" ng-click="hashMap['object:1'].actionEvent()"><span class="hint">Press on me to expand extra buttons</span>
<ul class="dropdown">
    <li class="dropdown-button" tabindex="0"><span ng-bind-html="hashMap['object:1'].icon" class="icon ng-binding"><i class="fa fa-ship"></i></span><span class="block"><span ng-bind="hashMap['object:1'].name" class="text ng-binding">Vessel visit</span><i class="fa fa-caret-down"></i></span>
        <ul class="dropdown-list">
            <li class="dropdown-button">
                <button class="button button-border inline-style" ng-disabled="!hashMap['object:2'].active" ng-click="hashMap['object:2'].actionEvent()" disabled="disabled"><span ng-bind-html="hashMap['object:2'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashMap['object:2'].name" class="inline-text ng-binding">btn1</span></button>
            </li>
            <li class="dropdown-button">
                <button class="button button-border inline-style" ng-disabled="!hashMap['object:3'].active" ng-click="hashMap['object:3'].actionEvent()" disabled="disabled"><span ng-bind-html="hashMap['object:3'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashMap['object:3'].name" class="inline-text ng-binding">btn2</span></button>
            </li>
            <li class="dropdown-button">
                <button class="button button-border inline-style" ng-disabled="!hashMap['object:4'].active" ng-click="hashMap['object:4'].actionEvent()" disabled="disabled"><span ng-bind-html="hashMap['object:4'].icon" class="inline-icon ng-binding"><i class="fa fa-arrows"></i></span><span ng-bind="hashMap['object:4'].name" class="inline-text ng-binding">Replan</span><span class="hint">btn3</span></button>
            </li>
        </ul>
    </li>
</ul>

按我以展开其他按钮

船舶访问


btn1


btn2


Replanbtn3

谷歌Chrome（56版）和微软Edge（38版）正在运行

但另一方面，在Mozilla Firefox（版本52）和Internet explorer（版本11）中