Floated+cleared element not affecting following floated elements in IE7 - is there a workaround?
I'm trying to style a definition list so that dt
tags start new rows, and can be followed by any number of dd
elements on the same row. In开发者_运维知识库 modern browsers this is as simple as
dt {
float:left;
clear:left;
}
dd {
float:left;
}
In IE7, however, if the clearing element has float, subsequent floats are not affected. (example) Is there any workaround for this bug? I've been looking around, but none of the solutions usually suggested seem applicable:
- since this is a definition list, I can't wrap elements on the same rows in a
div
. - I don't want to use an invisible non-floated clearing element - it would have to be a
dt
ordd
, and the whole point of using a definition listr instead of a table orspan
-br
soup is to have semantic markup, which would be messed up by purely presentationaldt
/dd
elements. - as far as I can see, approaches based on triggering hasLayout (thus triggering inline-block behavior) such as this don't work when the number of elements per row is not fixed. (Also, I would prefer not to bother with stripping whitespace.)
- I couldn't get this solution to work with
dl
instead oful
; even settingdisplay:list-item
didn't help.
Is there any other way to force IE7 to mimic standard float behavior?
Try using inline-block instead of floats.
dl {
line-height:1.2em;
padding-left:1em;
}
dt {
display:block;
margin:0 0 -1.2em -1em;
}
dd {
display:inline-block;
display:inline !ie;
margin-left:1em;
}
Credit to deathshadow who came up with this.
精彩评论