百分比表高度和 IE9答案

【问题标题】：Percentage table height and IE9百分比表高度和 IE9
【发布时间】：2012-08-16 04:15:40
【问题描述】：

我有一个非常愚蠢的问题：我想要一个表格内的字段，它具有 100% 的表格单元格高度。问题是 IE 浏览器，它不会那样做。在 Chrome 等上它可以工作（我认为也是 Firefox）。这是一个示例 html 文件：

<?xml version='1.0' encoding='UTF-8' ?>
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test</title>
<style type="text/css" media="screen">
body {
    background-color: #ffffff;
    font-size: 12px;
    font-family: Verdana, "Verdana CE",  Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
    color: #000000;

    height: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: medium none;
}

table.subTable td  {
    border-width: 0px;
    padding: 0px;
    margin: 2px;
}

.ui-slottable table {
    height:100%;
    width:100%;
}

.ui-slottable-slot {
    width:100%;
    height: 100%;
    border-radius: 5px; 
    border-width:1px;
    border-style:solid;
    border-color: #cccccc;
    background-color:#eeeeee;
    border-collapse: separate;
}

</style>
</head>
<body>
    <div class="ui-slottable">
        <table>
            <tbody>
                <tr>
                    <td>
                        <div class="ui-slottable-slot">

                            <table class="subTable" style="margin:2px;">
                                <tbody>
                                    <tr>
                                        <td>T1 Hallo</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </td>
                    <td>
                        <div class="ui-slottable-slot">

                            <table class="subTable">
                                <tbody>
                                    <tr>
                                        <td>T2 Hallo</td>
                                    </tr>
                                    <tr>
                                        <td>Halloggggggggggggggggggg</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

在此文件中，字段 T1 应与 T2 具有相同的高度。

我已经测试了很多不同的方法，但没有任何效果......

希望有人能告诉我 IE 是如何做到这一点的...

【问题讨论】：

请注意，在表格中嵌入表格是不好的做法：webdesign.about.com/od/layout/a/aa111102a.htm
这只是一个例子。
啊，好吧。如果您有一些需要帮助的特定代码，它可能会更有益。就目前而言，我不知道如何解决您的问题！对不起。
字段（灰色区域）在 IE8 和 Opera 11.6 上的高度也不同。
具体代码很难，因为这是 JSF 页面的一部分（非常简化的输出）。但问题是一样的......插槽中的固定高度它们具有相同的高度。但是固定高度不好...

标签： html internet-explorer height

【解决方案1】：

尝试设置高度通常不起作用。

您也可以通过在 T1 的最内层表中使用 2 行来获得相同的字段高度。（使用 nbsp 作为额外行的内容。）然后删除 table html 标记内的style="margin:2px;"。

【讨论】：

这与将高度设置为固定值的方法相同，该方法有效。但是修复它并不好......也许我必须写一个解决方法......