Css焦点按钮正在Edge和Chrome中运行，但在Firefox和IE中却没有

Question

我正在通过堆栈和互联网找到解决方案以解决问题

button:focus

我有creade下拉焦点菜单，例如（http://koen.kivits.com/articles/pure-css-menu/）

我的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;
}

我的HTML：

<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>

在谷歌浏览器（第56版）和Microsoft Edge（第38版）正在运作。

但是在Mozilla Firefox（第52版）和Internet Explorer（第11版）的其他方面