点击时Button发生偏移：不确定是JS还是HTML导致的问题

偏移原因 #

1. 核心触发原因：点击按钮执行音效播放逻辑时，会向和按钮同层级的<span id="player"></span>内动态插入<embed>标签。即便你给embed设置了hidden="true"属性，部分浏览器对该属性的原生处理仍会给元素保留极小的默认占位（比如默认行高、内置margin/padding），作为行内兄弟元素的按钮会被这个新增占位挤压，出现偏移。
2. 次要可能：未重置按钮的浏览器默认点击态样式，原生active状态的边距、轮廓变化也可能导致轻微位移。

修复方案 #

• 给#player元素添加样式，彻底屏蔽其占位能力，避免插入内容影响布局：

#player {
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline-block;
}

• （更推荐）改用Audio API播放音效，完全不需要修改DOM插入元素，从根源上杜绝布局变化，还可以直接删掉页面上无用的#player元素：

function playRandomSound() {
  const sounds = [
    "randomsound1.mp3",
    "randomsound2.mp3",
    "randomsound3.mp3",
  ];
  const soundFile = sounds[Math.floor(Math.random() * sounds.length)];
  new Audio(soundFile).play();
}

• 额外重置按钮点击态样式，避免浏览器默认样式干扰：

.mainsearchbutton:active {
  margin: 0;
  /* 保持和按钮普通状态一致的padding值即可 */
  padding: 8px 16px;
  outline: none;
}

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