javascript - 如果包含图标，按钮在 Chrome 中不起作用

Question

我有一个下拉菜单按钮，但是当它包含一些图标时，它在 Chrome 中无法正常工作。仅当我单击按钮的边缘时才有效。其他浏览器工作正常。我正在使用 Awesome Font 图标，并且有更多类似的按钮，它们都可以工作，但不是这个。是CSS的错吗？

  <div class="dropdown">
            <button onclick="dropMenu()" class="dropbtn">
                  <i class="fas fa-bars"></i>
            </button>
            <div id="drop-menu" class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>                        
            </div>                
    </div>

JS

function dropMenu() {document.getElementById("drop-menu").classList.toggle("show");  

window.onclick = function(event) { 
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
   }
  }
 }
}

CSS

.dropdown {
float: left;
padding-left: 1%;    
position: relative;
display: inline-block;}

.dropbtn {
font-size: 100%;
border: none;
outline: none;    
padding: 13px;
background-color: yellow;
width: 45px;
font-family: inherit;
margin: 0;
display: none;}

.dropbtn:hover, .dropbtn:focus {
background-color: grey;}

.dropbtn:hover {
cursor: pointer;    
background-color: grey;}

.dropdown-content {
display: none;
position: absolute;
background-color: grey;
min-width: 250px;
z-index: 1;}

.dropdown-content a {
float: none;
color: white;
padding: 5px 10px;
text-decoration: none;
display: block;
text-align: left;}

.dropdown-content a:hover {
background-color: grey;}

.show {
display: block;}

.fa-bars {
color: white;}

标签： javascripthtmlcssgoogle-chrome