网格单元格内div显示异常，类为input-group form-fieldset_select的元素位置偏下

问题根因 #

布局偏移的核心原因是fieldset原生元素作为网格容器的浏览器兼容性缺陷：
主流浏览器对<fieldset>标签实现display: grid/display: flex的支持不完善，legend元素的默认排版逻辑不会被识别为普通网格子元素，会干扰网格行高计算，导致后续的input-group元素定位基准偏移，自然就出现在预期网格单元格下方的位置。

解决方案 #

方案1：替换fieldset为普通div容器（兼容性最好） #

直接把外层的<fieldset>和<legend>替换为普通div标签，完全规避原生fieldset的布局缺陷，原有网格相关CSS属性不用修改即可正常生效：

<div class="form-fieldset">
  <div class="form-legend">Legend</div>
  <div class="input-group form-fieldset_select">
    <label class="select-button-label">
      Button1
      <input type="text" />
    </label>
     <label class="select-button-label">
       Button2
      <input type="text" />
    </label>
  </div>
</div>

仅需要对应调整legend相关的CSS选择器即可。

方案2：保留fieldset的情况下修正布局 #

给fieldset增加一层内部wrapper容器，把grid布局写在wrapper上，不要直接用fieldset作为网格容器：

/* 新增内部容器样式 */
.form-fieldset__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 20px 56px;
  row-gap: 8px;
}
/* 原有fieldset样式删除grid相关属性 */
.form-fieldset {
  width: 290px;
  height: auto;
  border: none;
  padding: 0;
  margin: 0;
}

对应HTML结构调整：

<fieldset class="form-fieldset">
  <div class="form-fieldset__inner">
    <legend>Legend</legend>
     <div class="input-group form-fieldset_select">
      <label class="select-button-label">
        Button1
        <input type="text" />
      </label>
       <label class="select-button-label">
         Button2
        <input type="text" />
      </label>
    </div>
  </div>
</fieldset>

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