如何针对Firefox、Safari移除按钮及功能，保留Chrome端显示？

这里有两种实用方案帮你实现需求，分别用CSS和JavaScript处理：

方案一：纯CSS实现（推荐，无需JS） #

利用浏览器专属的CSS规则，直接在Firefox和Safari中隐藏按钮并禁用交互：

/* 默认状态下按钮正常显示 */
#start {
  display: inline-block;
}

/* 针对Firefox隐藏按钮并禁用点击 */
@-moz-document url-prefix() {
  #start {
    display: none;
    pointer-events: none;
  }
}

/* 针对Safari隐藏按钮并禁用点击 */
@media not all and (-webkit-min-device-pixel-ratio:0) or (min-resolution:.001dpcm) {
  #start {
    display: none;
    pointer-events: none;
  }
}

把这段CSS加到你的样式表中，就能自动让按钮只在Chrome里显示，Firefox和Safari里完全隐藏且无法交互。

方案二：JavaScript动态处理 #

如果需要更灵活的控制（比如移除按钮的事件监听），可以用JS检测浏览器后操作：

// 检测是否为Chrome浏览器
const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
const targetButton = document.getElementById('start');

if (!isChrome) {
  // 隐藏按钮
  targetButton.style.display = 'none';
  // 移除按钮的所有事件监听（通过克隆节点替换原节点实现）
  const cleanButton = targetButton.cloneNode(true);
  targetButton.parentNode.replaceChild(cleanButton, targetButton);
}

把这段JS放在页面加载完成后执行（比如放在DOMContentLoaded事件里），就能确保非Chrome环境下按钮被隐藏且功能失效。

两种方案对比 #

• CSS方案：更轻量，无需额外JS，适合简单的显示隐藏需求
• JS方案：更灵活，能彻底移除按钮的交互事件，但依赖浏览器UA检测，可能存在被篡改的风险

你的按钮原代码如下，直接配合上面的方案即可：

<button id="start" class="left tooltipped" data-tooltip="Record" style="padding: 16px;border-radius: 100%;position: relative;background: #EB455F;top: 12px;"></button>

内容的提问来源于stack exchange，提问作者Mohit Gupta