可以将任何 HTML 元素设置为字段集/图例吗？

Posted 2023-02-16

技术标签:

【中文标题】可以将任何 HTML 元素设置为字段集/图例吗？【英文标题】：Can any HTML element be styled as a fieldset/legend? 【发布时间】：2011-03-17 07:22:54 【问题描述】：

使用display 属性，从样式的角度来看，html 元素可以互换。但是，fieldset 和 legend 似乎并非如此。

是否可以将其他 HTML 元素设置为类似于 fieldset 和 legend 的样式？

【问题讨论】：

【参考方案1】：

所以我修复了代码，使它看起来有点（它真的看起来像图例标签）像图例标签。

    <div style="border: 2px groove #ccc">
    <h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
  <fieldset><legend>Foobar</legend></fieldset>

【讨论】：

【参考方案2】：

这很好用，但是如果背景是图像，ie6 会表现得有点奇怪，条件注释无法解决任何问题。在 IE6-8、FF3.6、Safari 5、Chrome 5 中测试

.fieldset 
    position: relative;
    border: 1px solid #000;
    margin: 20px;
    padding: 20px;
    text-align: left;


.fieldset .legend 
    background: #fff;
    height: 1px;
    position: absolute;
    top: -1px;
    padding: 0 20px;
    color: #000;
    overflow: visible;


.fieldset .legend span 
    top: -0.5em;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    overflow: visible;



   <div class="fieldset">
      <div class="legend">
         <span>This is the title</span>
      </div>
      Test
   </div>

【讨论】：

【参考方案3】：

前面的答案不正确，如果你想看看为什么试试这个：

<body style="background-color: #f00">
  <div style="border: 1px solid #000">
      <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
  </div>
  <fieldset><legend>Foobar</legend></fieldset>
</body>

AFAIK 没有办法使legend 元素在fieldset 的边界上产生边界中断效果。我不相信单独使用 CSS 是可能的，它只是 fieldset 标记呈现方式的一部分。

澄清：我不知道有什么方法可以定位块或内联元素，使其跨越其包含块元素的可见边框，然后导致容器元素的边框被破坏在它的盒子后面。这就是 <legend> 对其包含 <fieldset> 元素的边框所做的事情。

【讨论】：

我的回答没有错，只是需要一定的条件才能工作。你会发现这种“诡计”通常就是这种情况；几乎没有一刀切的解决方案。好吧，他的问题是“如何将元素设置为字段集/图例对？”当您查看我提供的文档时，您是否看到两个相同的块？我真正想知道的是是否有办法（使用 CSS 标准）来获得 fieldset/legend 创建的确切效果，或者该效果是否是硬编码的只有fieldset/legend。因为它确实似乎是硬编码的，所以我接受这个答案。 HTML5 spec defined the rendering of these elements 明确出现，可能与 UA 已经在做的事情相匹配。另见：Is the <fieldset> + <legend> top border “erasing” behavior defined by any standard (HTML or CSS)?【参考方案4】：

当然，例如：一个带有边框的 DIV 元素和一个背景颜色设置为与 DIV 的边框重叠的子标题元素看起来就像一个字段集和图例。

非常基本的例子：

<div style="border: 1px solid #000">
    <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>

【讨论】：

只有当背景是纯色而不是图像时才能看起来正确。是的。除非可以将背景图像也应用于子标题元素并将其与背景匹配。然而，这需要元素处于固定位置才能工作。

以上是关于可以将任何 HTML 元素设置为字段集/图例吗？的主要内容，如果未能解决你的问题，请参考以下文章