表高度和IE9的百分比

时间:2012-03-12 14:00:06

标签: html internet-explorer height

我有一个非常愚蠢的问题:我想要一个表格内的字段,它有100%的表格单元格高度。问题是IE浏览器,它不会这样做。在Chrome等上它可以工作(我认为是Firefox)。这是一个示例html-File:

<?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是如何做到的......

1 个答案:

答案 0 :(得分:1)

尝试设定身高通常不起作用。

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