Firefox下visibility:hidden搭配z-index导致按钮子元素不可见如何解决

问题原因 #

CSS 规范未对 <button> 这类原生表单控件的 visibility 属性继承逻辑做强制要求，Firefox 的实现和 Chromium、Safari 存在差异：Firefox 会将 visibility: hidden 作用在按钮的整体渲染层上，内部子元素的 visibility: visible 声明无法覆盖该效果，因此会出现跨浏览器表现不一致的问题。

可用修复方案 #

• 方案1：重构结构，避免在 <button> 元素上直接设置 visibility: hidden
  把需要设置 visibility 的父层换成普通块级元素，按钮作为该父层的子节点即可，普通元素的 visibility 继承逻辑符合通用标准，子元素的 visible 声明可以在所有浏览器正常生效，修改后代码如下：

.parent {
  visibility: hidden;
  position: relative;
  z-index: 1;
}

.child {
  visibility: visible;
}

<div class="parent">
  <button>
    <span class="child">content</span>
  </button>
</div>

• 方案2：如果仅需要隐藏按钮的原生默认样式，不需要用到 visibility 属性
  直接清除按钮的原生样式即可，无需做显隐控制：

.parent {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

• 方案3：如果不能修改DOM结构，可改用其他显隐实现方式
  如果必须保留 <button> 作为父层的结构，可以结合 clip-path、透明背景等属性实现你需要的效果，比如仅需要显示子元素区域时：

.parent {
  position: relative;
  z-index: 1;
  /* 可根据实际需求调整裁剪参数 */
  clip-path: inset(0);
  background: transparent;
  border: 0;
  padding: 0;
}

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