Таблица со 100% строкой и Internet Explorer 9

У меня есть следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
    <TR>
        <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
    </TR>
    <TR style="height:100%">
        <TD style="height:100%;background-color:yellow">
            <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
        </TD>
    </TR>
</TABLE>
</DIV>
</BODY>
</html>

Он отлично работает с Chrome, Firefox или Internet Explorer в режиме quirks, но IE9 в стандартном режиме рисует текстовую область с такой же высотой, как и root. Итак, есть ли способ без использования JS, чтобы сообщить браузеру рисовать текстовое поле, используя все оставшееся пространство? Я безуспешно пытался div с атрибутами float, div с атрибутом таблицы отображения, div с атрибутом фиксированной позиции. Конечно, с Javascript или если первая строка имеет постоянную известную высоту, есть несколько рабочих решений.

Любые предложения?

Ответы

Ответ 1

Насколько я знаю, Internet Explorer ищет первый родительский элемент, который имеет hasLayout, чтобы вычислить высоту 100%. Это отличается от большинства других браузеров. Документация по свойству Internet Explorer hasLayout:

Начнем с того, что есть два набора элементов.

  • Элементы, которые полагаются на родительский элемент для сортировки и упорядочивания содержимого
  • Элементы, отвечающие за определение размеров и размещение собственного содержимого.

В общем, элементы в динамическом движке Internet Explorer не являются ответственных за организацию себя. Элемент div или p может иметь позиции в исходном порядке и потоке документа, но их содержимое расположено их ближайшим предком с макетом (часто тело). Эти элементы полагаются на макет предка, чтобы сделать весь тяжелый подъем определения размера и информации об измерениях для них.

Примечание. Элемент, отвечающий за определение размера и позиционирование элемента, может быть предком, а не только непосредственным родителем элемента.) Основные преимущества каждого элемента, не имеющие собственного макета, - это производительность и простота.

Быстрый способ решить вашу проблему может заключаться в том, чтобы добавить элемент div обертки в ваш td, который имитирует размер td, но из-за этого запускаются триггеры природы hasLayout (не проверены, jsFiddle on Совместимость IE8 нарушена):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
    <TR>
        <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
    </TR>
    <TR style="height:100%">
        <TD style="height:100%;background-color:yellow">
                <div style="height: 100%; width: 100%; position: relative;">
                    <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
                </div>
        </TD>
    </TR>
</TABLE>
</DIV>
</BODY>
</html>

Ответ 2

Требуется ли вам свойство height:150px; DIV, если не переместить его в TABLE:

См. здесь для JSFiddle:

<DIV style="background-color:#AAAAFF;overflow:auto">
<TABLE style="height:150px;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
    <TD style="height:100%;background-color:yellow">
        <TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>

Ответ 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
    <TD style="height:100%;background-color:yellow">
        <TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>
</BODY>
</html>

Ответ 4

Возможно, этот код поможет вам...

Я тестирую его на jsfiddle: http://jsfiddle.net/mHTTM/5/

В IE, если вы носите 100 процентов в дочернем теге, ширина/высота будут такими же, как ширина/высота верхнего родительского тега. Не родительский тег. Поэтому вам просто нужно изменить дочерние теги от процента к пикселю.

<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="auto">
    <TD style="height:122px;background-color:yellow">
        <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>

Ответ 5

Я не думаю, что вы должны использовать таблицы для макета в первую очередь. Перейдите к <div>, <span> и наборам контейнеров HTML5.