表mozilla 中的高度

发布于 2024-10-19 04:45:31 字数 2395 浏览 5 评论 0原文

我这里有一个包含两个字段的表，其中一个字段的高度为 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>

原文

I have here a table with two fields in which the height of a 1-pixel and the other 100 percent. This example clearly looks in Google Chrome. But it does not work in Mozilla. How to fix in 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沫雨熙 2024-10-26 04:45:31

我不确定 Mozilla 引擎如何解释标记的 HTML 高度属性，但使用 CSS 进行样式化可能会获得更好的结果。您是否尝试过类似的操作：

在 HTML 中...

<td class="shortcell">

在您的样式块中...

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

或内联...

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

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

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

这会起作用，但会被人皱眉。可能更好的方法是在表格单元格内放置一个 DIV 并对其应用高度。

HTML...

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

和 CSS：

.shortcell {height: 1px;}

I'm not sure how the Mozilla engine is interpreting the HTML height attribute for the <td> tag, but you might get better results using CSS for the styling instead. Have you tried something like:

In the HTML...

<td class="shortcell">

In your style block...

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

Or inline...

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

UPDATE: The CSS height attribute will only work on a block level element, so you can use:

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

This will work, but will be frowned upon. Probably better to put a DIV inside the table cell and apply the height to that.

The HTML...

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

And the CSS:

.shortcell {height: 1px;}

回复收藏 0 原文

花开柳相依 2024-10-26 04:45:31

它最初在 Chrome 10 和最新的 FF 中都对我有用。
这个例子帮助我弄清楚为什么“表格中99％或100％高度大小的行在Chrome中不能自动拉伸”。
这个错误在很多地方都被讨论过，但没有太多解决方案。
因此，通过这个工作示例，我设法找到了解决方案：
我所要做的就是“在 Chrome 10 中自动调整 99% 或 100% 高度的表格行就是使父表格的高度为 100%”