webkit显示：内联块行为不一致

Question

我有一个跨越其他几个跨度的范围，我想在display:block和display:inline之间切换子跨度。跨度从display:inline-block开始，然后切换到display:block。这很好用。问题是当在Webkit中切换回来时（它在Firefox中运行正常）：跨度在它们之间有额外的换行符呈现。

我可以正确地渲染此渲染而不在跨度之间放置<br/>标记吗？

演示：http://jsbin.com/omalu3/4/edit

Answer 1

任何其他解决方案都是一种解决方法，因为它是一个浏览器错误。 derekerdmann解决方案的替代方案：

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

Answer 2

另一个解决方法是不要将子跨度换成另一个跨度 - 这是一个内联元素。使用＆lt; div＆gt;对于#a而言，它的行为正确（至少在Webkit中！）。

另一方面，明星选择器效率不高，虽然我知道这只是一个例子，所以我不打算在这里批评：D

Answer 3

现在不是那么有趣。

我不确定导致问题的原因，但如果您将float: left;添加到#a.oneline *，它就会消失。当您这样做时，您可以将显示更改为阻止，以便您的样式如下所示：

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

此解决方案与原始布局之间的唯一区别是oneline块将在顶部而不是底部对齐，但您可以为这些元素设置固定高度。