Правильно растягивает ширину до 100% элемента встроенного блока в IE6 и IE7

У меня есть следующая разметка, где я пытаюсь получить правую сторону второй таблицы, чтобы выровнять ее с правой стороны над заголовком над ней. Это работает в IE8, Firefox и Chrome, но в IE6/7 таблица неправильно растягивается, чтобы заполнить ширину страницы.

Я использую Trip Switch hasLayout trigger для применения inline-block в IE6/7.

Кто-нибудь знает, как (или даже если) я могу получить таблицу только для заполнения естественной ширины элемента оболочки, отображаемого с помощью inline-block в IE6/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>

Обновить: вот еще один пример проблемы, на этот раз без использования таблицы и использования абсолютно позиционированного элемента контейнера. Вы можете увидеть, что код работает в режиме 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>

Ответ 1

Не получается, что это может быть достигнуто только с помощью CSS.

Я сознательно избегал использования script, потому что я предпочитаю использовать браузер для всех, когда страница динамически управляется, вместо того, чтобы писать ручной код для обновления ширины.

В конце я поставил проблему, указав минимальную ширину для моих таблиц, которая должна быть больше длины любого заголовка, который у меня будет.

Internet Explorer 6 и 7 не поддерживают min-width, но поскольку у меня есть общий script, который создает отображаемые таблицы, я динамически создаю дополнительный элемент 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

Если вы можете установить ширину на обертке (например, 50em), тогда таблица будет расширяться до ширины обертки.

Однако, если вам нужно, чтобы обертка расширялась динамически, вы можете использовать javascript для установки width таблицы в offsetWidth обертки. Здесь добавлена страница с javascript: http://jsbin.com/uyuva/5

Я тестировал его только на своем IE 8 с включенным режимом совместимости, так как у меня нет IE 6/7.

Ответ 3

Вам нужно будет использовать javascript для получения ширины h2 и применить его к таблице. Я не верю, что CSS может обрабатывать то, что вам нужно в каждом браузере coughIEcough

Вот хороший образец для ссылки