webkit display:inline-block behaving inconsistently

Question

I have a span with several other spans inside it, and I want to toggle the sub-spans between display:block and display:inline. The spans start off with display:inline-block, then are switched to display:block. This works fine. The problem is when toggling back in Webkit (it works fine in Firefox): the spans are rendered with extra line breaks in between them.

Can I make this render correctly without putting <br/> tags between the spans?

demo here: http://jsbin.com/omalu3/4/edit

Answer 1

Now isn't that fun.

I'm not sure what's causing the problem, but it goes away if you add float: left; to #a.oneline *. When you do that, you could change the display to block so your styles look like this:

#a.multiline * {  }
#a.oneline * { float:left; }
#a * { border:solid 1px black; display:block;}

The only difference between this solution and your original layout is that the oneline blocks will be aligned at the top instead of the bottom, but you could set a fixed height for those elements.

Answer 2

Any other solution would be a workaround since it's a browser bug. An alternative to derekerdmann's solution:

  #a.multiline * { width: 100% }
  #a.oneline * { width: auto }
  #a * { border:solid 1px black; display:inline-block }