<!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在奇怪的模式下工作正常,但IE9在标准模式下绘制与root div相同的文本区域.那么有没有使用JS的方法,告诉浏览器使用所有剩余空间绘制一个textarea？
我尝试使用float属性的div成功,div与显示表属性,具有固定位置属性的div.当然,使用Javascript或如果第一行具有恒定的已知高度,则有几个工作解决方案.
有什么建议么？
解决方法
To begin with,there are two sets of elements.
- Elements that rely on a parent element to size and arrange their contents
- Elements that are responsible for sizing and arranging their own contents.
In general,elements in Internet Explorer’s Dynamic HTML engine are not
responsible for arranging themselves. A div or a p element may have a
position within the source-order and flow of the document,but their
contents are arranged by their nearest ancestor with a layout
(frequently body). These elements rely on the ancestor layout to do
all the heavy lifting of determining size and measurement information
for them.Note: The element that is responsible for sizing and positioning an element may be an ancestor,not just the element’s immediate parent.) The major benefits of each element not having its own layout are performance and simplicity.
解决你的问题的一个快捷方法可能是在你的td中添加一个包装器div元素,它模拟了td的大小,但是由于它的自然触发器hasLayout(未被测试,IE8上的jsFiddle兼容性被破坏)：
<!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>
