javascript - 我的网站在更改焦点时出现意外行为

Question

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

对于每个输入数据，在更改焦点时，我的表格高度增加，如下图所示:

在我的表格的 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 规则/样式。