html – 具有100％高度行和Internet Explorer 9的表

发布时间：2020-12-14 18:54:09 所属栏目：资源来源：网络整理

导读：我有以下例子： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"htmlheadmeta http-equiv="X-UA-Compatible" content="IE=edge"meta http-equiv="Content-Type" content="text/html; charset=ISO-88

我有以下例子：

<!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或如果第一行具有恒定的已知高度,则有几个工作解决方案.

有什么建议么？

解决方法

据我所知,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 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!