<fieldset>样式异常：Chrome中Div自适应内容不符合预期

我之前也踩过fieldset这个“特殊元素”的布局坑，来给你梳理下可行的解决方案～

问题根源 #

fieldset是表单体系里的特殊元素，浏览器对它的渲染规则和普通块级元素有差异。哪怕你给它设置了display: table，Chrome中它的内部布局逻辑还是会保留一些fieldset的默认特性，导致子元素（你的.cell div）没有按照table-cell的预期占满宽度，反而变成自适应内容大小。

可行解决方案 #

方案1：用内部div承担table布局（推荐）

保留fieldset的表单语义，把table样式移到内部的一个div上，让fieldset只做外层容器：

<fieldset>
  <div class="table">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
</fieldset>

你的原有CSS不需要修改，这样内部div会完全遵循table布局规则，子元素就能正常平分宽度了。

方案2：重置fieldset的默认特殊样式

如果一定要让fieldset本身作为table容器，可以给.table类添加额外的重置样式，强制它遵循table的渲染逻辑：

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
  /* 新增重置fieldset默认样式 */
  border-inline-start: 0;
  border-inline-end: 0;
  padding-block: 0;
  padding-inline: 0;
  min-inline-size: 0;
}

这些属性会清除fieldset默认的内边距、边框等特殊设置，让Chrome正确识别它的table布局。

方案3：替换fieldset为div（如果语义允许）

如果你的场景不需要fieldset的表单语义，直接把它换成普通div，原代码就能正常工作：

<div class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</div>

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