在 IE6 和 IE7 中将宽度正确拉伸到内联块元素的 100%答案

【问题标题】：Stretching width correctly to 100% of an inline-block element in IE6 and IE7在 IE6 和 IE7 中将宽度正确拉伸到内联块元素的 100%
【发布时间】：2011-02-14 02:23:55
【问题描述】：

我有以下标记，我试图让第二个表格的右侧与上方标题的右侧对齐。这适用于 IE8、Firefox 和 Chrome，但在 IE6/7 中，表格被错误地拉伸以填充页面的宽度。

我在 IE6/7 中使用Trip Switch hasLayout trigger 应用inline-block。

有谁知道我如何（或者即使）我可以让表格只填充在 IE6/7 中以 inline-block 显示的包装元素的自然宽度？

您可以在http://jsbin.com/uyuva 看到实时运行的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.wrapper {
    display: inline-block;
    border: 1px solid green;
}
/* 
 display: inline-block triggers the wrapper element to have layout for IE 6/7.
 The trip switch then provides the inline component of the display behaviour.
 See http://www.brunildo.org/test/InlineBlockLayout.html for more details.
 */
.wrapper {
    *display: inline;
}

table {
    border: 1px solid red;
}
</style>
</head>
<body>
<h1>No width on table:</h1>
<div class="wrapper">
    <h2>The right hand side of the table doesn't stretch to the end of this heading</h2>
    <table><tr><td>foo</td></tr></table>
</div> text

<h1>Width on table:</h1>
<div class="wrapper">
    <h2>The right hand side of the table should stretch to the end of this heading</h2>
    <table style="width: 100%"><tr><td>foo</td></tr></table>
</div> text
</body>
</html>

更新：这是问题的另一个示例，这次没有使用表格并使用绝对定位的容器元素。您可以在http://jsbin.com/igila4 看到实时运行的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
div {
    position: absolute;
    border: 1px solid red;
}

input {
    width: 100%;
    *width: 95%; /* fudge factor for IE 6/7 which don't support box-sizing */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

textarea {
    width: 400px;
}
</style>
<body>
The width of the input and textarea below should be identical.<br/>
<div>
    <input value="This is an input with width 100%"><br/>
    <textarea>This is a text area with width 400px.</textarea>
</div>
</body>
</html>

【问题讨论】：

您是想让表格专门匹配其上方的 H2 宽度，还是只填充 div.wrapper 的宽度而不考虑 H2？
如果 H2 比表格的自然宽度宽，我正在尝试让表格与 H2 的宽度相匹配。如果 H2 比自然表格宽度窄，那么我希望 div.wrapper 的宽度最终成为自然表格宽度。

标签： internet-explorer internet-explorer-6 internet-explorer-7 css

【解决方案1】：

看来这只能通过 CSS 来实现。

我故意避免使用脚本，因为我更喜欢在动态操作页面时利用浏览器为我重排所有内容，而不必编写手动代码来更新宽度。

最后我绕过了这个问题，为我的表格指定了一个最小宽度，该宽度应该比我将拥有的任何标题的长度更宽。

Internet Explorer 6 和 7 不支持 min-width，但由于我有创建要显示的表的通用脚本，因此我动态创建了一个额外的 thead 元素，该元素有一个跨越每一列的单元格我的风格可以有效地给我同样的结果：

CSS

table {
    min-width: 600px;
}
th.min-width {
    *width: 600px;
}

HTML 表格结构

<table>
    <thead><tr><th colspan="3" class="min-width"></th></tr></thead>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

【讨论】：

【解决方案2】：

如果您可以在 wrapper 上设置宽度（例如 50em），那么表格将扩展为 wrapper 的宽度。

但是，如果您需要动态加宽包装器，则可以使用 javascript 将表格的width 设置为包装器的offsetWidth。这是添加了 javascript 的页面：http://jsbin.com/uyuva/5

我只在运行兼容模式的 IE 8 上对其进行了测试，因为我没有 IE 6/7。

【讨论】：

【解决方案3】：

您需要使用 javascript 来获取 h2 的宽度并将其应用于表格。我不相信 CSS 可以处理你在每个浏览器中需要的东西 coughIEcough

这是一个很好的sample 参考

【讨论】：