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

Question

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

Sim*_*hke 11 css internet-explorer internet-explorer-7 internet-explorer-6

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

我使用的行程开关的hasLayout触发适用inline-block于IE6/7.

有谁知道如何(或者甚至)我只能填充inline-blockIE6/7中显示的包装元素的自然宽度？

您可以在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>?

Run Code Online (Sandbox Code Playgroud)

更新:这是问题的另一个例子,这次不使用表并使用绝对定位的容器元素.您可以在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sim*_*hke 4

看来这不能仅通过 CSS 来实现。

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

最后，我通过指定表格的最小宽度来回避这个问题，该宽度应该比我将拥有的任何标题的长度更宽。

Internet Explorer 6 和 7 不支持min-width，但由于我有通用脚本来创建我正在显示的表格，因此我动态创建了一个额外的thead元素，该元素具有一个跨越每一列的单元格，我对其进行样式设置以有效地给出相同的结果:

CSS

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

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，6 月前
查看次数：	7464 次
最近记录：	13 年，1 月前