Safari/WebKit 表在使用空格时溢出：nowrap答案

【问题标题】：Safari/WebKit table over-run when using whitespace: nowrapSafari/WebKit 表在使用空格时溢出：nowrap
【发布时间】：2010-09-17 17:08:33
【问题描述】：

Safari 出现奇怪的渲染问题：

我在 div 中有一个表格。在表

内，我有很多 div 向左浮动。因此，正常显示是 td 内的所有 div 向左堆叠，直到它们填满宽度，然后流到下一行，依此类推。所以是这样的：

|===========================|
|  |---------------------|  |
|  | XXX  XXX  XXX  XXX  |  |
|  | XXX  XXX            |  |
|  |                     |  |
|  |----------------------  |
|===========================|

这适用于除 safari/webkit 之外的所有浏览器，最终结果如下：

|===========================|
|  |-------------------------------|
|  | XXX  XXX  XXX  XXX  XXX  XXX  |
|  |                               |
|  |-------------------------------|
|===========================|

更新：终于解决了问题：我的内部 div（“XXX”）有 white-space: nowrap。显然，webkit 没有包装整个 div 列表，而不是在 div 中应用 nowrap。

这是一个讨厌的。

（这与 display:none 无关）

【问题讨论】：

您可以在jsbin.com 上弹出一个公开演示 - 只需包含与您的代码和 CSS 相关的 HTML sn-p。点击保存，你得到的 URL 人们可以调试它。
也许您可以发布解决方案作为答案，稍等片刻，然后自我接受？否则，这个问题将永远“悬而未决”。
我没有意识到我可以自己接受自己的答案，让我试一试。

标签： css firefox safari webkit

【解决方案1】：

其实我上面的问题是分开问的，然后像个大男孩一样找到了解决办法：

不使用 white-space:nowrap，在这种情况下使用 display:inline-block 更合适。

CSS 需要在这里和那里进行调整以适应变化，但它可以按预期工作。

Elements with nowrap get stuck to adjacent elements in WebKit

【讨论】：

【解决方案2】：

回答我自己的问题：

终于解决了问题：我的内部 div（“XXX”）有空格：nowrap。显然 webkit 没有包装整个 div 列表，而不是在 div 中应用 nowrap。

这是一个讨厌的。

（这与 display:none 无关）

【讨论】：