CSS achieves the effect of text pressing on the edge line, fieldset and legend

To achieve the above results, we can use background images in a region. In fact, such labels can be used in XHTML.

InsertCode: <Fieldset> domain (defines a fieldset)
<Legend> Domain Title (defines a title in a fieldset)

However, to ensure compatibility, the actual operation is not that simple. Page code:

Insert code: <Fieldset>
<Legend> Ducky's private life </legend>
<Ul>
<Li> Ducky's private life! Happy New Year! </LI>
<Li> Ducky's private life! Happy New Year! </LI>
<Li> Ducky's private life! Happy New Year! </LI>
<Li> Ducky's private life! Happy New Year! </LI>
</Ul>
</Fieldset>

Define by style

Insert code: * {Font-size: 12px; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif ;}
Fieldset {padding: 10px; margin: 10px; width: 160px; color: #453739; Border: #453739 solid 1px ;}
Legend {color: #933a34; font-weight: bold; Background: # ffffff ;}
Ul {list-style-type: none ;}
Li {margin-top: 4px ;}

With CSS, we can achieve what we want. But there are some problems:
1. compatibility. First, I set all padding and margin to 0, because IE and FF are different by default.
2. in IE6, the padding between fieldset and the above container is padding-top, but margin-top does not respond... margin-top is used in ff.
3. if you define the border style border of fieldset, the border in IE6 will overlap with the text in legend, but the default style will not. Therefore, you need to block the border of legend with a background: # ffffff.

In general, it is better to control in ff. Although such labels are not used much, they can quickly achieve some results. However, it is said that if fieldset is used to deploy the layout, fieldset must be used in the Form tag.