fieldset firefox overflow CSS fix

How can i set content to overflow in fieldset? It works in IE but not in FF.

Same functionality I can achieve with div element in both browsers.

Sample:

<fieldset style="border:thin solid #9开发者_运维百科90033;">
    <legend>test</legend>
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</fieldset>
<p>&nbsp;</p>
<div style="border:1px solid #999999; padding:0 8px 8px 8px;">
    <label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label>
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</div>

Found solution, add conditional css style:

fieldset {
    display: table-column;
}
<!–[if IE]>
fieldset {
    display: block;
}
<![endif]–>

This is actually a bug in Firefox and it exists for almost 8 years. :D https://bugzilla.mozilla.org/show_bug.cgi?id=261037

From a blog post by Emil Björklund:

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

you don't need to overflow the content! In IE(6), by default, the "fieldset" tag has no padding, in FF it has! That is why you have a different behavior!

You can reset the padding (padding:0px;) of the fieldset but in this case, in FF, the label doesn't look fine! To fix that, you can reset the padding-bottom of the fieldset and apply a "margin-left:-12px" to the div inside the fieldset. However, that solves the problem with FF but generates an issue in IE!

So, my suggestion is to use conditional CSS statements to apply to each browser the right rules of style!