jquery - IE9 中的 Max-Width 解决方案(带文本溢出)

Question

我正在尝试在 IE9 中使用最大宽度属性。它被用在具有动态生成宽度的表格单元上(我正在使用数据表)。我也在使用“文本溢出:省略号；”所以它基本上具有在视觉上切断字符的效果，但没有最大宽度我无法做到这一点。

我不想在每个表格单元格上定义一个设置宽度，因为动态创建的宽度在其他情况下都可以正常工作。

这是我的 CSS:

.tableViewer tbody tr td {
max-width:220px;
overflow:hidden;
text-overflow: ellipsis;
 color: #000000;
font-size: 12px;
margin: 0 0 0 20px;
padding: 5px 5px 5px 10px;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
/*border-bottom:  1px solid #D8D8D8; */
 -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

如前所述，HTML 是通过 DataTables 生成的。但这是它的渲染形式:

<tr class="odd">
<td class=" sorting_1" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb@aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb.com" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb@aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb.com</td>
<td class="" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb</td><td class="" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb</td>
<td class="" title="" style="max-width: 220px; overflow: hidden; "></td><td class="" title="" style="max-width: 220px; overflow: hidden; "></td>
<td class="" title="" style="max-width: 220px; overflow: hidden; "></td><td class="" style="max-width: 220px; overflow: hidden; ">2 <a href="#">view</a></td></tr>

抱歉，标题太长了，但这就是我试图解决这个问题的原因。有人有什么建议吗？

编辑:

应要求，这里有一个显示 CSS/HTML 和问题的 JSfiddle! http://jsfiddle.net/PY4cb/

Answer 1

好的，所以我找到了答案(感谢@MrOBrian 的一些指示)——包含表需要具有此属性:

table-layout: fixed;

仅在 IE 中。出于某种原因，IE 不接受表格中没有此元素的单元格中的最大宽度(而所有其他浏览器都可以)。