Question

我这里有一个包含两个字段的表格，其中1个像素的高度和100％的高度。此示例在Google Chrome中清晰显示。但它在Mozilla中不起作用。如何修复Mozilla？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    *{margin: 0; padding: 0;}
    html, body{position: relative; width: 100%; height: 100%; overflow: hidden;}
    table{height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" height="100%">
        <tbody height="100%" >
            <tr>
                <td height="100%" valign="top">
                    <div style="overflow: auto; height: 100%">
                        sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />sdfsdf<br />a1
                        afasdasd sdfs sdv
                    </div>
                </td>
            </tr>
            <tr>
                <td height="1" valign="top">
                    test<br />test<br />test<br />test<br />test<br />
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

我不确定Mozilla引擎如何解释<td>标记的HTML高度属性，但使用CSS进行样式设置可能会获得更好的结果。你尝试过类似的东西吗？

在HTML ...

中

<td class="shortcell">

在您的样式栏中......

td.shortcell {height: 1px; vertical-align: top;}

或内联...

<td style="height: 1px; vertical-align: top;">

更新：CSS height属性仅适用于块级元素，因此您可以使用：

td.shortcell {height: 1px; vertical-align: top; display: block}

这会奏效，但不会受到谴责。将DIV放入表格单元格并将高度应用于该单元格可能更好。

HTML ...

<td>
  <div class="shortcell">
     contents here
  </div>
</td>

CSS：

.shortcell {height: 1px;}

Answer 2

最初在Chrome 10和最新的FF中都适用于我。这个例子帮助我弄清楚为什么“ 99％或100％高度大小的行在Chrome中不能自动拉伸”。许多地方都讨论过这个bug，但没有多少解决方案。所以，通过这个工作示例，我已经设法找出解决方案：我所要做的就是“使一张99％或100％高度的表格在Chrome 10中自动调整大小是为了让父表的高度为100％”

表高度在mozilla

2 个答案: