显示：xbrowser表格单元格不不断设置高度（ie8表格错误）

发布于 2024-09-28 23:08:24 字数 1051 浏览 0 评论 0原文

我正在设置一个包含大量动态内容的页面。我正在将其组织在表格中。一共有三行，每行都有一个单元格。顶部部分用作固定标题，因为我已经设置了顶部单元格的高度。底部单元格用作页脚，因为它也具有静态高度。表格的总高度设置为 100%，中间行/单元格留出填充动态内容和表格中的剩余空间。下面是一个两行的例子来演示这个问题：

<html>
  <body>
    <div class="element_container", style="width: 600px; height: 500px;">
      <div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
          </div>
        </div>
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

在Chrome/Firefox/Safari中，表格的总高度保持在500px。在 IE8 中，它变为 540px，就好像第二个单元格的 100% 高度继承自表格本身，而不是其父行。

有没有办法让表格在浏览器中以相同的方式工作？或者，至少，在 IE8 的表格中获得相同类型的功能？

原文

I'm setting up a page with a bunch of dynamic content. I'm organizing this within a table. There are three rows, each with a single cell. The top part works as a fixed header, since I've set the top cell's height. The bottom cell works as a footer, since it also has a static height. The table's total height is set to 100% and the middle row/cell is left to be filled with dynamic content and the remaining space in the table. Here is a two-rowed example to demonstrate the problem:

<html>
  <body>
    <div class="element_container", style="width: 600px; height: 500px;">
      <div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
          </div>
        </div>
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

In Chrome/Firefox/Safari, the total height of the table is kept at 500px. In IE8, it becomes 540px, as if the 100% height from second cell are inherited from the table itself, and not its parent row.

Is there anyway to get tables to work the same way across browsers? Or, at the very least, obtain the same sort of functionality within tables in IE8?

分享到QQ

分享到微博

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

发布评论

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

人海汹涌 2024-10-05 23:08:24

不确定为什么您要尝试在不使用 table 标签的情况下创建表？这看起来效果很好。

<html>
  <body>
    <table style="width:600px; height:500px; background:blue;">
      <tr>
        <td style="height:40px; background: green;">Hi</td>
      </tr>
      <tr>
        <td style="background: red;">Hello</td>
      </tr>
    </table>
  </body>
</html>

Not sure why you are trying to create a table without just using the table tag? This appears to work fine.

<html>
  <body>
    <table style="width:600px; height:500px; background:blue;">
      <tr>
        <td style="height:40px; background: green;">Hi</td>
      </tr>
      <tr>
        <td style="background: red;">Hello</td>
      </tr>
    </table>
  </body>
</html>

回复收藏 0 原文

維他命╮ 2024-10-05 23:08:24

IE 的最大问题之一是它对单元格对齐的默认解释：以及它的替代盒模型。通常，在符合标准的浏览器中高度为 500 像素的物体在 IE 中会更高或更宽。

最好的选择是对 IE 样式表使用条件注释：我甚至对 IE 6、7、8 使用条件注释，以强制网站在所有浏览器中看起来一致。

尝试以下操作：

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]--> 

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->

或者，您似乎没有理由使用表格。创建 div 以获得更一致的布局。

One of the biggest problems with IE is its default interpretations for cell alignment: and also it's alternative box model. Often things that are 500px tall in standards compliant browsers are taller or wider in IE.

Best option is to use conditional comments for IE style-sheets: I go as far as using one for IE 6,7,8 to force the site to look consistent across all browsers.

Try something like:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]--> 

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->

Alternately, it seems there is no reason for you to be using a table. Create divs instead for a more consistent layout.

回复收藏 0 原文

~没有更多了~