posted by Kravvitz at 9:11 PM on Dec. 19th, 2009Categories: CSS, Browsers, Webkit/Blink, Bugs 1 comments
Webkit browsers (which include Apple Safari and Google Chrome) and Konqueror
make an absolutely positioned element be positioned below an inline element
sometimes, as if the inline element was a block element. That happens when the
absolutely positioned element is automatically positioned, has
and follows the inline element which takes up the full width (or almost the
full width) of the parent element. Take a look at the following five examples.
(To be clear, it's the third and fourth examples that are displayed differently
in Webkit browsers.) Then we'll take a look at some solutions.
Normal Inline Element
Full Width Image Element
Full Width Inline-Block Element
width:100%this is an absolutely positioned element that's positioned automatically
Some ways to get browsers to handle this more consistently are to give the
sibling inline element
display:block (like in the 5th example),
float:right. However, the float fix
doesn't work correctly in Opera, Konqueror (tested in 3.5), and Safari 1.0
(I have access to neither 1.2 nor 1.3 currently, but it does work in Safari 2+).
Alternatively, one could give the absolutely positioned element
display:block, but IE5-7 won't render that differently so it's not
the best for cross-browser consistency. Lastly, one could, of course, specify
explicitly where the absolutely positioned element should be positioned (with
the top and left properties, for instance), which often entails giving an
ancestor (which could be the parent, of course)
position:relative to create a new positioning context. So, to
summarize, the first (shown above) and fourth/last fixes are best for
Floated Image Element
So it's interesting that in this one area at least a few versions of each of 3 of the 4 major rendering engines have a bug. (Webkit was originally based on the KHTML engine used in Konqueror, so while not exactly the same, they often have the same CSS bugs.) And in case you're interested, here's the relevant section of the CSS2.1 specs.