Originally posted by NickFitz
View Post
Interesting case 
The word-wrap property with value break-word is part of CSS3; however, it was in fact an IE5.5 invention, IIRC. IE8 changed the property to have a vendor prefix (-ms-word-wrap) when IE8 is in Standards Mode, which is the correct thing for a proprietary implementation of a non-standardised property. This made it compatible with then-current browsers like Firefox 3.0 and Opera 9, but of course MS update things a lot more slowly than every other browser vendor, and won't support the unprefixed version until IE9 comes out, either later this year or early next.
In the meantime, I can either supply the prefixed version, or let IE8 exhibit the same behaviour as other browsers (except IE6 and 7) did before the property was brought into CSS3. I think the former would be best.
Either way, it's unfortunate that even when IE6 and 7 were the only browsers in the world that actually supported it, they still didn't manage to do it properly - that duplicate-characters/stretcheing-bounding-box bug really doesn't make them look good
- On IE6, it has "geoffreywhereveryoumay" on the first line, with the first three pixels of "b" appearing outside the container, and "ybe" on the next line, repeating the "y"; it also believes that the element's bounding box is 17px wider than it is, which is the correct number of pixels to accommodate the "be", despite the fact that it's put them on the next line (with the phantom "y"), and has increased the height of the box accordingly;
- On IE7, it's the same as IE6, except it doesn't draw the partial "b" outside the container;
- On IE8, it simply overflows the container and draws it all on one line - this means the bounding box has the same width as on IE6 and 7, but isn't as tall as it hasn't drawn anything on the next line;
- On Opera 10.0 for Mac it behaves like IE8;
- On the latest Chrome for both Mac and Windows, Opera 10.6, Safari 5, and Firefox 3.6, it wraps "ybe" onto the second line and doesn't extend the box out of its container: this is correct behaviour as word-wrap: break-word; has been applied (otherwise it should have overflowed like IE8).
The word-wrap property with value break-word is part of CSS3; however, it was in fact an IE5.5 invention, IIRC. IE8 changed the property to have a vendor prefix (-ms-word-wrap) when IE8 is in Standards Mode, which is the correct thing for a proprietary implementation of a non-standardised property. This made it compatible with then-current browsers like Firefox 3.0 and Opera 9, but of course MS update things a lot more slowly than every other browser vendor, and won't support the unprefixed version until IE9 comes out, either later this year or early next.
In the meantime, I can either supply the prefixed version, or let IE8 exhibit the same behaviour as other browsers (except IE6 and 7) did before the property was brought into CSS3. I think the former would be best.
Either way, it's unfortunate that even when IE6 and 7 were the only browsers in the world that actually supported it, they still didn't manage to do it properly - that duplicate-characters/stretcheing-bounding-box bug really doesn't make them look good
Comment