如何在 IE9 兼容模式下使列的宽度适合其内容？答案

【问题标题】：How to make width of a column fit to its contents in IE9 compatibility mode?如何在 IE9 兼容模式下使列的宽度适合其内容？
【发布时间】：2012-01-08 12:26:29
【问题描述】：

我的 HTML 中有下表。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
    table, td, tr, th{
        border:1px;
    }

    .onepx{
        width:1px;
    }
</style>


<div style="max-width:700px;">
    <table>
        <tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
        <tr><td class="onepx">a:</td><td>b</td></tr>
        <tr><td class="onepx">c:</td><td>d</td></tr>
    </table>
<div>

我希望第二行和第三行中的第一列宽度恰好适合内容长度（这就是我将 width="1px" 放在那里的原因）。同时，我希望表格宽度恰好适合表格中最长内容的长度（即第一行），而不是跨越其边界 div 的最大宽度。

在 Firefox 和 IE9 下兼容模式关闭，如下图所示。

但是，在 IE 9 兼容模式下，它无法按预期工作，如图所示。

由于某种原因，我无法在 IE9 中关闭兼容模式。那么有没有办法在兼容模式下设置表格样式？

提前致谢。

PS。我问了一个类似的问题，但没有强调 IE9 兼容模式。这个问题是在得到上一个问题的信息后提出的。我不确定是否应该将此问题合并到上一个问题中，因为有新要求。如果有任何建议，请告诉我。

【问题讨论】：

标签： html css ie-compatibility-mode

【解决方案1】：

所以看看你提供的内容，如果你的文件是这样设置的，那么你在严格模式下工作并且错过了开头和 .

至于改变IE9模式，选择F12可以改变浏览器和文档模式。

另外，不要忘记将<meta http-equiv="X-UA-Compatible" content="IE=9" > 添加到您的脑海中。

表格样式应移至 CSS。

你也可以试试：

表：

<table class="fixed">
    <col width="10px" />
    <tr>
        <td>text</td>
    </tr>
</table>

CSS：

table.fixed { table-layout: fixed; }
table.fixed td { overflow: hidden; }

【讨论】：