5

IE 没有正确响应nowrap CSS 属性。

问题：如何在 IE 中进行这项工作，以便它呈现为 Chrome 的呈现结果。

http://jsfiddle.net/subsari/tmz0t0z2/3/

<body>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td class="long_string">Data 1 with long text</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>


th {
border: 1px solid red;
}
td {
    border: 1px solid black;
}
.long_string {
    white-space: normal;
    white-space: nowrap;
    max-width: 100px;
    color: #FFA500;
}

如何让 IE 像 Chrome 一样渲染表格？最干净的解决方案？

提前感谢您的帮助！

4

2 回答 2

6

问题不在于white-space: nowrap（文本保持在一行），而在于max-width设置。尽管 IE 7 通常也支持它，但 IE 7 在应用于表格单元格时似乎存在问题，以及其他一些奇怪的问题。（我的观察是基于在不同的仿真模式下使用 IE 11，而不是在旧版本的 IE 上实际测试。）

如果支持 IE 7（及更早版本）足够重要，您可以考虑在内容上设置特定宽度而不是最大宽度。然后需要将长字符串包装在一个容器中并在其上而不是在表格单元格上设置宽度。您还需要overflow: hidden在该容器上进行设置（否则溢出的内容仍然会使单元格变宽）。例子：

th {
    border: 1px solid red;
}
td {
    border: 1px solid black;
}
.long_string {
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    color: #FFA500;
}
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td><div class="long_string">Data 1 with long text</div></td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

于 2015-01-03T07:40:08.483 回答
0

该white-space: nowrap属性应该可以在 IE 中使用，一直到 5.5

http://css-tricks.com/almanac/properties/w/whitespace/#browser-support

它可能与您正在运行的 IE 的特定副本有关。尝试添加!important到white-space: nowrap声明的末尾，以确保没有与您的代码冲突的插件或用户代理样式表。

于 2015-01-02T21:46:57.257 回答