5

IE がnowrap CSS 属性に適切に応答しない。

質問: Chrome のレンダリング結果としてレンダリングされるように、IE でこれを機能させるにはどうすればよいですか。

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

ChromeのようにIEにテーブルをレンダリングさせるにはどうすればよいですか? 最もクリーンなソリューション？

事前にご連絡いただきありがとうございます。

4

2 に答える 2

6

問題はwhite-space: nowrap(テキストが 1 行にとどまる) ではなく、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 に答える