Legend标签无法正确嵌入fieldset边框问题求助

现象：表单内的fieldset元素下的legend标签未正常嵌入fieldset边框顶部，而是像块级元素一样处于边框下方。

已尝试的无效方案：

• 给fieldset设置position: relative
• 给legend设置padding: 0
• 脱离Bootstrap或自定义CSS新建表单后应用上述样式

当前使用的代码：

CSS #

.contact-form {
  position: relative;
  padding: 10px;
  margin: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.contact-form > legend {
  padding: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

HTML #

<div class="col-xl-6 col-md-12">
  <form id="contactForm" method="POST" action="some_api.php">
    <fieldset class="contact-form">
      <legend>Ajánlatkérés</legend>
      ... 多个输入框、标签等内容 ...
    </fieldset>
  </form>
</div>

解决方案 #

问题通常源于浏览器默认样式被覆盖，或者legend的定位属性未正确设置。可以通过以下CSS调整实现正确嵌入：

.contact-form {
  position: relative;
  padding: 2em 10px 10px; /* 增加顶部内边距，避免内容被legend遮挡 */
  margin: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.contact-form > legend {
  padding: 0 10px; /* 左右内边距，避免文字紧贴边框 */
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  position: absolute;
  top: -0.6em; /* 向上移动，嵌入边框顶部 */
  left: 10px;
  background-color: #fff; /* 背景色覆盖边框，防止文字与边框重叠 */
}

额外检查点 #

如果上述方案无效，排查是否有全局样式重置了legend的display属性（比如设置为display: block），这会破坏默认的嵌入行为，需将其改回display: inline或保留默认值。

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