CSS float issue in IE6/7
I've got a weird CSS float problem in IE6 and IE7.
My HTML is:
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div class="display-label"># resources&l开发者_StackOverflow社区t;/div>
<div class="display-field">2</div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div class="display-label">Requested by</div>
<div class="display-field">1066594</div>
<div class="display-label">Status</div>
<div class="display-field">Active</div>
</fieldset>
and my CSS is:
.display-label, .display-field
{
padding: 0.35em 0.25em;
float: left;
}
.display-label
{
width: 13em;
text-align: right;
clear : left;
font-weight: bold;
}
.display-field
{
margin-left: 1em;
}
IE 8+ and Firefox display this correctly like this:
IE6 and 7 , though, display the following:
How can I fix this?
you do need to contain the floats, i.e. use some form of clearance, but you don't need to float everything
first remove the inline style, unfloat the fieldset
<fieldset style="float:left">
if you want fieldset
to "shrink-wrap" (floating an element without a width should do this) you'd be best to set a width or max-width on it, IE hasn't quite got the shrink-wrap behaviour right the element to be "shrunk" contains elements with hasLayout which this 'fieldset` does because of the floated div(s) inside
then this CSS should work without hacking the HTML
.display-label,
.display-field {
padding: 0.35em 0.25em;
}
.display-label {
float: left;
clear: left;
width: 13em;
text-align: right;
background: #eee;
font-weight: bold;
}
.display-field {
overflow: hidden;
}
EDIT: You need to specify a a clear after the label and the field are created. You should technically be wrapping both the label and field with a container element to prevent misalignment, but this should accomplish what you're looking for.
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div style="clear:both;"></div>
<div class="display-label"># resources</div>
<div class="display-field">2</div>
<div style="clear:both;"></div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div style="clear:both;"></div>
...
</fieldset>
精彩评论