单击时输入文本框正在移动

Question

我正在做一个项目。您可以访问页面here 这是发生错误的一小部分

            <div class="col-sm-6 responsive-table">
                <table>
                    <caption>Page template</caption>
                    <tr  >
                        <td class='leftCol'>Easy</td>
                        <td ><input   ng-model='page.easy' ng-model='wordpress' min=0 type='number' class='form-control numberInput' ></td>
                    </tr>
                    <tr >
                        <td  >Medium</td>
                        <td ><input   ng-model='page.medium' type='number' min=0 class='form-control numberInput'></td>
                    </tr>
                    <tr >
                        <td class='leftCol'>Hard</td>
                        <td ><input   ng-model='page.hard' type='number' min=0 class='form-control numberInput'></td>
                    </tr>
                </table>
            </div>

            <div class="col-sm-6 responsive-table">
                <table>
                    <caption>Frontpage template</caption>
                    <tr  >
                        <td class='leftCol'>Easy</td>
                        <td><input   ng-model='frontpage.easy' type='number' min=0 class='form-control numberInput'></td>
                    </tr>
                    <tr >
                        <td  >Medium</td>
                        <td><input   ng-model='frontpage.medium' type='number' min=0 class='form-control numberInput'></td>
                    </tr>
                    <tr  >
                        <td class='leftCol'>Hard</td>
                        <td><input   ng-model='frontpage.hard' type='number' min=0 class='form-control numberInput'></td>
                    </tr>
                </table>
            </div>
        </div> 

当我单击应用程序中的输入文本框时，整个组都会移动。有谁知道为什么？ 起初我以为是因为数据切换工具提示。我试图通过将容器主体添加到元素来修复它，但它不起作用。我认为这不是因为工具提示，因为我什至删除了工具提示的东西，但它仍然不起作用。 感谢您的阅读！欢迎任何答案、提示或建议。

Answer 1

我在 chrome 中尝试过，点击时没有看到偏移。这可能是由于 css 问题。请注意，当您单击输入、外部、更改值等时，角度会修改输入的类。一些被修改的类是： ng-pristine、ng-dirty、ng-valid、ng-invalid、ng-touched（可能还有更多）。

如果你的 css 有一个改变元素大小的定义，例如一个活动对象的不同边框，它可能会产生这样的效果。

跟踪问题的一种方法是使用 chrome 并执行以下操作： 1. 右键单击​​该字段并选择“检查 elemenet” 2. DevTools 窗口打开，现在单击输入元素和退出输入元素，查看更改了哪些类，DevTools 为您动画更改，您将获得视觉提示。 3. 查看哪些定义可能会影响布局。