IE8 中的表格渲染问题使用断字答案

【问题标题】：Table rendering issue in IE8 using break-wordIE8 中的表格渲染问题使用断字
【发布时间】：2012-09-18 17:02:16
【问题描述】：

我有一个基于用户输入动态构建的表——即用户在表中输入数据，并确定一行中有多少个字段等。因此，我无法控制长度数据和有限的布局控制。我仍然设法构建了在 FF、Chrome、Safari 中运行良好的东西，但我在 IE8 和 IE9 中遇到了一个烦人的问题。我为有问题的表格单元格包含以下 css：

td.dc {
    white-space:normal;
    -ms-word-wrap: break-word;
    max-width: 80em;
}

IE 会忽略所有 3 个标签，并在整个行中继续。如果我将单元格的内容包装在 div 中并将 css 应用于 div，它在 IE9 中有效，但在 IE8 中仍然无效。在 IE8 中，文本实际上在 80 em 之后换行，但单元格仍被渲染得足够宽以适应展开的行，因此表格中的其他所有内容都被推过。有没有办法解决？

[编辑] 我创建了一个 jsfiddle 来说明正在破坏的特定情况：http://jsfiddle.net/qz3rv/3/ 我已经意识到（从错误报告中并不清楚）是只有某些情况似乎被破坏了——也许与/ 在数据中。

【问题讨论】：

不要使用-ms-word-wrap，除非您特别想针对 IE 8+。使用不带前缀的word-wrap。
也看看this question。你可能想使用table { table‑layout: fixed; width: 30em; }之类的东西。
我专门针对 IE8+，这就是我使用前缀的原因。 white-space:normal 在其他浏览器中表现我想要的方式。不幸的是，我不能使用 table-layout:fixed 因为布局是由用户决定的：他们选择在同一行中包含多少个字段，并且他们决定了字段的内容（以及长度）。
我使用前缀是因为我只希望它适用于 IE。我真的不想打断单词——在某些情况下，就像我在 jsfiddle 中说明的那样，我只是无法让它在单词之间打断。我不能使用 table-layout:fixed 因为用户决定了列的大小和数量。

标签： css internet-explorer css-tables

【解决方案1】：

当在最小的 HTML 环境中测试时，发布的代码在标准模式下的 IE 上工作。所以显然你的代码在Quirks Mode 中运行。因此，请尝试在 HTML 文件的开头添加 <!doctype html>。

考虑使用基本上小于80em 的值进行测试，否则。请注意，white-space:normal 只是重新确认默认值，-ms-word-wrap: break-word 及其标准对应物在某些例外规则中表示破坏性单词（违反正常书写规则），应避免使用。

另请注意，表格列宽是一项棘手的工作，要描述它的具体问题，您应该显示表格标记和相关的 CSS。

【讨论】：

对于我的 IE 9，它不会破坏任何东西（检查 jsfiddle，指定了 doctype）。
在 IE8 中查看这个小提琴：jsfiddle.net/qz3rv/1 第一个示例也没有包含在 IE9 中，但我承认，我使用spoon.net 在 IE9 中进行测试，而不是实际的 IE9 浏览器（我不想升级我的 IE8，因为那样我就不能回去了，不幸的是，我们仍然需要为大约 30% 的用户提供支持。
哦，另外，我的 doctype 已经是“瘦”版本：不知道如何在 jsfiddle 中准确设置，但这是实际站点的 doctype，它被破坏了。
当您在td 上设置max-width（与td 中的元素相反）时，浏览器在列宽分配方面表现不同。但它看起来不像一开始就应该以这种方式处理的内容；如果内容是文件的 URL 或路径名，并且需要这样，则应在合理的断点处将它们分成几行。如果您通过插入<wbr> 或零宽度空格来做到这一点，则内容将开始表现得像普通文本一样，或多或少，问题可能会消失。