CSS: IE: white-space: nowrap 不工作

Question

IE 未正确响应 nowrap CSS 属性。

问题：如何在 IE 中使它工作，使其呈现为 Chrome 的呈现结果。

<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 那样渲染 table？最干净的解决方案？

感谢您提前的帮助！

Answer 1

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

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

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

Answer 2

问题不在于 white-space: nowrap（文本停留在一行），而在于 max-width 设置。虽然它通常是 supported 即使是 IE 7，但 IE 7 在应用于 table 单元格时似乎有问题，以及其他一些奇怪的地方。（我的观察是基于在不同的仿真模式下使用 IE 11，而不是在旧版本的 IE 上实际测试。）

如果支持 IE 7（及更早版本）足够重要，您可以考虑在内容上设置特定宽度而不是最大宽度。 To 然后需要将长字符串包装在容器中并在其上设置宽度，而不是在 table 单元格上。您还需要在该容器上设置 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>

CSS: IE: white-space: nowrap 不工作

CSS: IE: white-space: nowrap not working

css

internet-explorer

overflow

nowrap