如何实现checkbox与label同行？Grid布局在Edge显示异常求助

问题根源 #

旧版非Chromium内核Edge对CSS Grid的部分布局逻辑支持不完善，当前的Grid列设置在Edge渲染环境下容易出现元素错位；另外未将每组checkbox与label封装为独立单元，也会导致Grid的排版逻辑混乱。

方案1：改用Flex布局（兼容性最优） #

Flex在各浏览器的支持度更稳定，能轻松实现checkbox与label同行排列，同时结构更清晰：

.improve {
  margin: 20px 150px 40px 345px; 
}

.ans {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.ans-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

对应调整HTML，将每组checkbox+label包裹在.ans-item容器中：

<div class="improve">
  <label for="improve">What would you like to see improved? (Check all that apply)</label>
  <div class="ans">
    <div class="ans-item">
      <input type="checkbox" id="fe" value="Front-end Projects"> 
      <label for="fe">Front-end Projects</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="be" value="Back-end Projects"> 
      <label for="be">Back-end Projects</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="da" value="Data Visualization"> 
      <label for="da">Data Visualization</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="ch" value="Challenges"> 
      <label for="ch">Challenges</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="os" value="Open Source Community"> 
      <label for="os">Open Source Community</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="help" value="Gitter help rooms"> 
      <label for="help">Gitter help rooms</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="vid" value="Videos"> 
      <label for="vid">Videos</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="meet" value="City Meetups"> 
      <label for="meet">City Meetups</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="wiki" value="Wiki">
      <label for="wiki">Wiki</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="forum" value="Forum"> 
      <label for="forum">Forum</label>
    </div>
    <div class="ans-item">
      <input type="checkbox" id="add" value="Additional Courses"> 
      <label for="add">Additional Courses</label>
    </div>
  </div>
</div>

方案2：优化Grid布局（保留Grid同时兼容Edge） #

如果坚持使用Grid，可通过添加旧版Edge前缀并为每个元素指定网格位置解决，不过操作相对繁琐：

.improve {
  margin: 20px 150px 40px 345px; 
}

.ans {
  display: -ms-grid; /* 旧Edge兼容前缀 */
  display: grid;
  -ms-grid-columns: 50px 250px; /* 旧Edge列定义 */
  grid-template-columns: 50px 250px;
  grid-gap: 10px;
  margin-top: 15px;
}

/* 为旧Edge手动指定每个元素的网格位置 */
.ans input:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; }
.ans label:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; }
.ans input:nth-child(3) { -ms-grid-row: 2; -ms-grid-column: 1; }
.ans label:nth-child(4) { -ms-grid-row: 2; -ms-grid-column: 2; }
.ans input:nth-child(5) { -ms-grid-row: 3; -ms-grid-column: 1; }
.ans label:nth-child(6) { -ms-grid-row: 3; -ms-grid-column: 2; }
.ans input:nth-child(7) { -ms-grid-row: 4; -ms-grid-column: 1; }
.ans label:nth-child(8) { -ms-grid-row: 4; -ms-grid-column: 2; }
.ans input:nth-child(9) { -ms-grid-row: 5; -ms-grid-column: 1; }
.ans label:nth-child(10) { -ms-grid-row: 5; -ms-grid-column: 2; }
.ans input:nth-child(11) { -ms-grid-row: 6; -ms-grid-column: 1; }
.ans label:nth-child(12) { -ms-grid-row: 6; -ms-grid-column: 2; }
.ans input:nth-child(13) { -ms-grid-row: 7; -ms-grid-column: 1; }
.ans label:nth-child(14) { -ms-grid-row: 7; -ms-grid-column: 2; }
.ans input:nth-child(15) { -ms-grid-row: 8; -ms-grid-column: 1; }
.ans label:nth-child(16) { -ms-grid-row: 8; -ms-grid-column: 2; }
.ans input:nth-child(17) { -ms-grid-row: 9; -ms-grid-column: 1; }
.ans label:nth-child(18) { -ms-grid-row: 9; -ms-grid-column: 2; }
.ans input:nth-child(19) { -ms-grid-row: 10; -ms-grid-column: 1; }
.ans label:nth-child(20) { -ms-grid-row: 10; -ms-grid-column: 2; }
.ans input:nth-child(21) { -ms-grid-row: 11; -ms-grid-column: 1; }
.ans label:nth-child(22) { -ms-grid-row: 11; -ms-grid-column: 2; }

额外提示 #

• 若使用新版Chromium内核Edge仍有问题，大概率是浏览器缓存或其他样式冲突，可清空缓存后测试，或检查全局样式是否干扰了当前布局。
• 建议避免使用固定像素值的margin（如345px），改用百分比或max-width实现响应式布局，适配不同屏幕尺寸。

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