Back in the IE6 days, I used to simulate Windows-style Group Boxes (see example) in HTML by creating a div with a border, and positioning a span with the text over the border with a solid background color to "erase" the box border. It was trivial to position the group text at the top or bottom of the box.
This technique worked well, except in cases where the background was not a solid color. I realize the <fieldset> and <legend> tags provide the exact same behavior I am describing, except non-solid backgrounds are supported but the text can only go above the fieldset.
The fieldset and legend combo seems to work magically such that whatever the legend touches will be erased from the fieldset border (never drawn actually). Why does it do this? I have found examples from W3 that illustrate the behavior, but I cannot find anything in the HTML4/5 spec that instructs the UA to "calculate the width of the legend and don't draw the border there." Is this behavior defined anywhere, or have the browser vendors unanimously decided it should draw this way?
If the behavior is not defined... I want to replace the old IE6 code with something modern, but I'm not sure if I should use fieldset (even apart from a form) or some CSS feature I am not aware of to erase borders just like fieldset implementations do already. What do the standards offer to either depend on fieldset or emulate it reliably?
The position of the legend is standard. HTML5 rendering says
A
fieldsetelement's rendered legend, if any, is expected to be rendered over the top border edge of thefieldsetelement as a 'block' box (overriding any explicit 'display' value).
It doesn't explicitly say that the border behind the legend is erased, but otherwise the legend would appear to have a line-through decoration. So browsers erase the border.
来源：https://stackoverflow.com/questions/39541432/is-the-fieldset-legend-top-border-erasing-behavior-defined-by-any-standa