Правильное растяжение ширины до 100% элемента встроенного блока в IE6 и IE7 - PullRequest
Новая
       10

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

11 голосов
/ 30 апреля 2010

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

Я использую триггер отключения переключателя hasLayout , чтобы применить 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>

Ответы [ 3 ]

4 голосов
/ 23 июня 2010

Не похоже, что это может быть достигнуто только через 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>
1 голос
/ 01 мая 2010

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

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

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

0 голосов
/ 03 мая 2010

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

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

...