我的网站在更改焦点上的意外行为

Question

我正在使用Knockout.js库和jQuery开发Web应用程序。最初形式是这样的：

Foreach输入数据，关于更改焦点，我的表格高度增加，如下图所示：

在我的表格的HTML代码下面：

<table style="width:100%;">
        <col width="25%" />
        <col width="25%" />
        <col width="50%" />
        <tr>
            <td>
                <span id="spnMaintenanceLastDate" class="Description">TEXT</span>
            </td>
            <td>
                <input id="dtpMaintenanceLastDate" class="DatePicker" data-bind="value: shopViewModel.lastMaintenanceDate" />
            </td>
            <td>
                <span id="spnMaintenanceDescription" class="Description">TEXT</span>
            </td>   
        </tr>
        <tr>
            <td>
                <span id="spnConcept" class="Description">TEXT</span>
            </td>
            <td>
                <select id="slcConcept" data-bind="value: shopViewModel.conceptId" style="width:100%"></select>
            </td>  
            <td rowspan="2">
                <textarea id="MaintenanceDescription" style="height:100%; width:100%; margin-right: 5px;" data-bind="value: shopViewModel.maintenanceDescription"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <span class="Description">TEXT</span>
            </td>
            <td>
                <select id="slcFlooringType" data-bind="selectedOptions: shopViewModel.flooringTypes" multiple="multiple" style="width:100%"></select>
            </td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">
                <hr class="hr" />
            </td>
        </tr>
    </table>

你能帮帮我吗？ 感谢

注意：使用Internet Explorer 8我没有这个问题，我在现代浏览器中遇到了这个问题。

Answer 1

您可能必须专门将<td>元素的垂直对齐方式设置为类似vertical-align:top的内容，因为这似乎是默认行为vertical-align:baseline。

尝试添加css规则/样式。

Answer 2

问题似乎与高度和垂直对齐有关。就像@mOchia所说，vertical-align应该足够了，但为了安全起见，我建议使用百分比并添加height属性。