html – 具有100％高度行和Internet Explorer 9的表_html-js-css

概述我有以下例子： <!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="Con 我有以下例子：

<!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 ><table >    <TR>        <TD >Text with an unkNown height (22px here)</TD>    </TR>    <TR >        <TD >            <TEXTAREA  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或如果第一行具有恒定的已知高度,则有几个工作解决方案.

有什么建议么？

解决方法据我所知,Internet Explorer会查找已经发出hasLayout的第一个父元素来计算100％的高度.这与大多数其他浏览器不同. Documentation on Internet Explorer’s hasLayout property:

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 ><table >    <TR>        <TD >Text with an unkNown height (22px here)</TD>    </TR>    <TR >        <TD >                <div >                    <TEXTAREA  ColS=30 ROWS=4>Remaining space (150px with IE9,122px with others)</TEXTAREA>                </div>        </TD>    </TR></table></div></BODY></HTML>

总结

以上是内存溢出为你收集整理的html – 具有100％高度行和Internet Explorer 9的表全部内容，希望文章能够帮你解决html – 具有100％高度行和Internet Explorer 9的表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/1141921.html