Question

我正在构建一个HTML表并使用Internet Explorer 11.在每个TR中都有几个具有不同大小的嵌入元素的TD。我通过IE DOM Explorer检查了页面，并认为我知道发生了什么。通常，textarea是最大的元素（按照CSS的167px），但有时其他td元素之一会更大（比如td1 = 300px）。我遇到的问题是我希望文本区域填写为300px。我可以看到，高度继承自td id =“td3”，仍然是167px。有没有办法让td id =“td3”从tr中最大的兄弟td获得高度。

HTML看起来像这样

<thead>
   ...
</thead>
<tbody>
    <tr>
        <td id="td1">[Dynamic Text1]</td>
        <td id="td2">[Dynamic Text2]</td>
        <td id="td3"><textarea class="ta"></textarea></td>
    </tr>
    <tr>
    ...
    </tr>
    <tr>
    ....
</tbody>

CSS

.ta{
    height: 100%;
    min-height: 167px
}

有一件事我注意到Chrome做了我想要的但我更喜欢符合标准的解决方案

Answer 1

确保您没有HTML错误（尝试使用w3.org验证程序进行验证）。这通常是在不同渲染引擎之间出现显示错误的原因。无论如何，你的例子似乎在这里工作正常：

td {
    min-height: 200px;
    background: lightblue;
    vertical-align: top;
}

textarea {
    display: block;
    height: 100%;
    min-height: 50px;
}

http://jsfiddle.net/Kg3P5/2/

根据TR中最大的TD设置高度

1 个答案: