javascript - 为什么我的 html 按钮在 I.E 中移动？他们不会在 Chrome 或 FF 中移动

Question

我们使用 AJAX 将数据发送到我们的数据库。我为用户添加了一些反馈，包括在请求期间旋转的微调器(动画 .gif)，以及在请求完成时向用户显示的通过/失败文本。

HTML:

<center>
    <table style="width:350px;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="spinner-and-text-displayed-here"></span>
            </td>
            <td style="width:150px">
                <input type="button" value="Submit" onclick="submit();"/>
                <input type="button" value="Cancel" onclick="cancel();"/>
            </td>
            <td style="width:100px"></td>
        </tr>
    </table>
</center>  

当用户单击提交按钮时，微调器旋转直到返回 ajax 回调。此时，按钮不会移动。收到回调后，我会显示文本“成功!” (显示在使用 jQuery $(el).html("Successful!"); 的 span 中)，这会导致按钮向右移动。该消息淡出(也使用 jquery)，一旦按钮完全淡出，按钮就会移回原来的位置。

如果我硬编码“成功!”在跨度内，按钮发生了移动，所以我知道它与文本有关(请记住，当显示微调器时它不会移动 [使用 img 标记])。

我将第一个 td 宽度设置为多宽并不重要。

有什么方法可以防止这些按钮在 IE 中移动？

Answer 1

尝试添加 border-collapse:collapse;到 style table 的定义并减小中间单元格的大小。

<center>
    <table style="width:350px;border-collapse:collapse;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="spinner-and-text-displayed-here"></span>
            </td>
            <td style="width:145px">
                <input type="button" value="Submit" onclick="submit();"/>
                <input type="button" value="Cancel" onclick="cancel();"/>
            </td>
            <td style="width:100px"></td>
        </tr>
    </table>
</center>