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

提前感谢您的帮助！

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

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

2 个答案: