Inline elements do not reset spaces to the end of the tag in modern browsers?

Question

Example: http://jsfiddle.net/9e81ytwg/

<div>Foo <span> Bar </span> Baz</div> *{font-size:30px;font-family:monospace} span{background:red;} 

Presented in obsolete browsers :

Presented in modern browsers :

• BREORE Bar there are TWO spaces, they fall into one single space, which appears WHITE
• AFTER BAR, there are DOUBLE spaces, they collapse on one single space, which appears RED

why is this difference? and why is it different from how it worked just a few months ago?

Is there a specific spec / point at which the rendering has changed? I would expect it to work as it does in older browsers. Or is this a mistake?

Answer 1

http://www.w3.org/TR/CSS2/text.html#white-space-model (my attention):

If the "white space" is set to "normal", "nowrap" or "pre-line"

• each tab (U + 0009) is converted to space (U + 0020)
• any space (U + 0020) after the next space (U + 0020) - even the space before the built-in , if this space also has a "white space" set to "normal", "nowrap" or 'pre-line' - is deleted.

Thus, the behavior that you see is absolutely correct: all spaces are flushed from the reverse side forward, so the previous spaces are not red (they are collapsed into the "space in front of the built-in"), and the final one - other spaces fall into it).

I have no idea what “old browsers” you refer to, but it was probably a fix in their engine somewhere along the way, since it had been in standards like this for several years.

Update: Standards were not specified in this in 2008 , when CSS2 was last updated, but was explicit in the final versions of CSS 2.1 in 2011 . Therefore, it is not very strange that browsers were not uniform as to how to handle this.