我完全理解你遇到的困扰——Firefox和Chrome对绝对定位元素的点击区域处理逻辑差异，再加上动态垂直居中的可复用组件需求，确实容易踩坑。下面咱们一步步拆解问题并给出可行方案：

问题根源分析 #

1. Firefox的点击区域规则：绝对定位的按钮如果没有明确的尺寸或自适应设置，它的点击区域只会覆盖自身文档流内的内容，不会包含脱离文档流的子元素（比如你设置了position:absolute的div）。
2. 居中方式的缺陷：你用top:50%让按钮垂直居中，但没有配合transform: translateY(-50%)，这导致按钮的顶部对齐容器中间，而非按钮自身中心；再加上子元素div的top:-43px偏移，直接让SVG跑到了按钮的点击区域之外。

最优解决方案（动态适配+完美居中） #

这个方案不需要硬写固定值，完全适配动态尺寸的可复用组件，同时彻底修复Firefox的点击问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* 给按钮父容器设置相对定位，作为居中的参考基准 */
.button-container {
  position: relative;
  height: 300px; /* 示例高度，可根据实际场景调整 */
}

button {
  z-index: 1;
  position: absolute;
  /* 基于容器的垂直+水平居中，动态适配按钮自身尺寸 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: none;
  /* 让按钮尺寸完全贴合子元素 */
  display: inline-block;
  padding: 0; /* 移除默认padding，确保按钮和SVG尺寸完全一致 */
}

/* 移除子元素的绝对定位，让它留在按钮的文档流中 */
button div {
  /* 删除原来的 position: absolute; top: -43px; */
}

/* 去掉SVG默认的inline间隙，确保尺寸精准 */
svg {
  display: block;
}
</style>

<div class="button-container">
  <button>
    <div>
      <svg width="400" height="110">
        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
        Sorry, your browser does not support inline SVG.
      </svg>
    </div>
  </button>
</div>

<script>
$('button').on('click', (e) => { alert('clicked'); });
</script>

方案说明 #

• 动态居中：transform: translate(-50%, -50%)是目前最可靠的动态居中方案，不管按钮尺寸如何变化，都会以自身中心对齐容器中心，完美适配可复用组件。
• 点击区域修复：按钮设置display: inline-block; padding:0后，会自动根据子元素尺寸调整自身大小，点击区域完全覆盖SVG，Firefox和Chrome都能正常响应点击。
• 移除冗余定位：删掉子元素div的绝对定位，避免它脱离按钮文档流，从根源上解决SVG超出按钮点击区域的问题。

特殊场景兼容（必须保留子元素绝对定位） #

如果你的布局需求必须保留子元素的绝对定位，可以用这个方案手动扩展按钮的点击区域：

button {
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  /* 手动设置按钮尺寸，覆盖子元素偏移后的范围 */
  width: 400px; /* 和SVG宽度一致 */
  height: calc(110px + 43px); /* SVG高度加上div向上偏移的43px */
  padding-top: 43px; /* 让点击区域覆盖div偏移的部分 */
  overflow: visible;
}

button div {
  position: absolute;
  top: 0; /* 配合按钮的padding-top，实现原来的偏移效果 */
  left: 0;
}

这个方案适合子元素尺寸固定的场景，如果是动态尺寸，还是推荐第一种方案更灵活。

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