调试模式下（≤600px）按钮与锚点点击事件异常求助

按钮与推文链接在常规浏览器及移动端设备中表现符合预期，但在浏览器调试模式下，当屏幕宽度触发≤600px的媒体查询时，出现以下异常交互：

• 悬停在按钮下方区域时，按钮会被高亮可调试，点击该区域会触发按钮的点击事件；
• 悬停在按钮上准备调试时，推文链接会被高亮，且其区域位于按钮正上方；
• 点击「new quote」按钮时，会触发推文链接的跳转动作。

该问题仅在调试模式下可复现，实际手机设备上按钮与链接表现正常。

相关元素HTML代码 #

<a id="tweet-quote" href="https://twitter.com/intent/tweet" target="_top">
    <img id="twitter-logo" src="https://www.pngkey.com/png/full/67-670821_twitter-logo-outline-transparent-twitter-logo-white.png" class="clickable links-buttons color-scheme">
</a>

<button id="new-quote" onclick="getQuote()" class="links-buttons clickable color-scheme">
    <b>New  Quote</b>
</button>

相关CSS代码 #

#new-quote {
    float: right;
    padding: 1.25%;
    border: none;
    cursor: pointer;
  }
#tweet-quote {
    text-align: left;
  }
#twitter-logo {
    height: auto;
    width: 4.5%;
    padding: 1%;
  }
.clickable:hover {
    transform: scale(1.25);
    transition-duration: .5s;
  }
.links-buttons {
    position: relative;
    top: 30px;
  }

@media screen and (max-width: 600px) {
    #tweet-quote {
    flex-basis: 10%;
  }
    #new-quote {
    flex-basis: 20%;
  }
.links-buttons {
    top: 0;
  }
#twitter-logo {
    padding: 4%;
  }
#new-quote {
    padding: 2%;
    min-width: 50%;
  }
}

注：按钮与锚点所在容器在≤600px时切换为flexbox布局。

内容的提问来源于stack exchange，提问作者Joshua Willis