Протяжение ширины правильно к 100% элемента встроенного блока в IE6 и IE7
У меня есть следующая разметка, где я пытаюсь заставить правую сторону второй таблицы выравниваться с правой стороной заголовка выше ее. Это работает в IE8, Firefox и Chrome, но в IE6/7 таблица неправильно расширяется для заполнения ширины страницы.
Я использую Переключатель Прохождения hasLayout триггер для применения inline-block в IE6/7.
Делает любой знает, как (или даже если) я могу заставить таблицу только заполнять естественную ширину элемента обертки, отображенного с inline-block в IE6/7?
Вы видите, что код работает живой по http://jsbin.com/uyuva.
Test
No width on table:
The right hand side of the table doesn't stretch to the end of this heading
foo
text
Width on table:
The right hand side of the table should stretch to the end of this heading
foo
text
Обновление: вот другой пример проблемы, на этот раз не используя таблицу и с помощью абсолютно расположенного контейнерного элемента. Вы видите, что код работает живой по http://jsbin.com/igila4.
Test
The width of the input and textarea below should be identical.
3 ответа
Не похоже, что это может быть достигнуто только с помощью 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>
Если вы можете установить ширину оболочки (например, 50 мкм), то таблица будет расширяться до ширины оболочки.
Однако, если вам нужно, чтобы оболочка динамически расширялась, вы можете использовать javascript для установки ширины таблицы равной offsetWidth оболочки. Вот страница с добавленным javascript: http://jsbin.com/uyuva/5
Я тестировал его только на своем IE 8 в режиме совместимости, так как у меня нет IE 6/7 .
Вам нужно будет использовать javascript, чтобы получить ширину h2 и применить ее к таблице. Я не верю, что CSS может справиться с тем, что вам нужно, в каждом браузере coughIEcough
Вот хороший образец для ссылки