Fieldset设为Flexbox时，Legend内按钮在移动端Safari无法点击

将fieldset元素设置为flexbox布局时，嵌套在legend内的按钮仅在移动端Safari浏览器中无法被点击。已排查flexbug 9（fieldset flex布局显示异常问题），确认布局显示正常，但按钮点击事件完全失效。

代码示例 #

CSS #

* {
  box-sizing: border-box;
}
fieldset {
  display: flex;
}
legend {
  width: 100%;
}
button {
  width: 100%;
  font-size: 2rem;
}
button:hover {
  background: red;
}

HTML #

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <fieldset class="col" data-un="u_SkwBump">
      <legend>
        <button>Click</button>
      </legend>
    </fieldset>

    <script src="src/index.js"></script>
  </body>
</html>

问题原因 #

这是移动端Safari针对表单特殊元素（fieldset/legend）的兼容性bug：当fieldset被设置为display: flex后，浏览器会错误地阻断legend内部元素的事件传递路径，导致嵌套的按钮无法捕获点击事件。该问题属于事件处理层面的渲染异常，和flexbug 9的布局显示问题无关。

解决方案 #

方法1：给legend添加相对定位 #

通过给legend设置position: relative，强制Safari正确识别其内部元素的可点击区域：

legend {
  width: 100%;
  position: relative; /* 新增 */
}

方法2：转移flex布局到内部容器 #

如果不需要fieldset本身承担flex布局容器的角色，可以在fieldset内部嵌套一个div，将flex布局属性移到这个div上，避免干扰legend的事件处理：

<fieldset class="col" data-un="u_SkwBump">
  <legend>
    <button>Click</button>
  </legend>
  <div style="display: flex;">
    <!-- 原本fieldset下的flex子元素放在此处 -->
  </div>
</fieldset>

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