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

发布于 2024-09-15 23:00:30 字数 394 浏览 11 评论 0原文

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

我可以正确地进行渲染而不在跨度之间放置标签吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白芷 2024-09-22 23:00:30

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

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

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 }

回复收藏 0 原文

蹲在坟头点根烟 2024-09-22 23:00:30

另一种解决方法是不使用另一个跨度（这是一个内联元素）包裹子跨度。使用

对于 #a 并且它的行为正确（至少在 Webkit 中！）。

另一方面，星号选择器并不是真正有效，尽管我知道这只是一个示例，所以我不会在这里批评它：D

回复收藏 0 原文

神妖 2024-09-22 23:00:30

现在没那么好玩了。

我不确定是什么原因导致了这个问题，但如果您将 float: left; 添加到 #a.oneline *，问题就会消失。执行此操作时，您可以将显示更改为块，以便您的样式如下所示：

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

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

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.

回复收藏 0 原文

~没有更多了~