IE9: p {white-space:pre-wrap} vs img {float:left|right}

Bad code or IE9 bug?

IE9 behavior: with p {white-space:pre-wrap} in a floating environment, IE9 renders a word on every line. It does not skip lines where the width is too short for the first word; instead, text on those lines overflows the right edge of the container or the left edge of the image. Text intrudes on the preceeding and succeeding images on the right side of the floated objects.

Test page and IE9 screen shot attached (hopefully. I’m new at this.)

Screen shot didn’t “stick” in first post. 2nd try.


It does look as though that’s a bug in IE9 and removing the pre-wrap allows the text to wrap as per other browsers albeit with the loss of the white space you added.

I see white space in a document to be presentation issue and I would add the white space with css (use a span and padding/margins for inline elements) rather than putting spaces in the document which will always be upset if someone edits or reformats the content accidentally. Unless of course its something like a code block that has been inserted where you need to preserve the structure.

I couldn’t see a fix for IE9 anyway so you will either have to remove the rule for IE9 only or allow for the white space to be created with css/html instead.