为什么我的 HTML 表单元素在 IE8 中单击它们时会四处移动？答案

【问题标题】：Why do my HTML form elements move around when clicking on them in IE8?为什么我的 HTML 表单元素在 IE8 中单击它们时会四处移动？
【发布时间】：2012-08-06 07:06:17
【问题描述】：

我有一个带有一堆输入字段（文本类型和选择）的 HTML 表单。我将它们浮动，以便每行有两个。在所有浏览器（包括 IE7）中，一切正常，但出于某种原因，在 IE8 中，每当我在任何字段或其标签内单击时，该字段或周围的字段都会垂直向上或向下移动。一旦我点击离开框，该位置就会恢复正常，但附近的另一个框可能会移动。此外，并非所有文本框字段都有此问题，单击同一个文本框并不总是会导致此问题。有什么想法吗？

【问题讨论】：

你能放一个 jsfiddle 让人们更好地了解你实际上是如何做的吗？
我目前无权访问代码，但没有异常的实现。它是一个带有一堆浮动元素的常规
（每行包含两个输入，后跟一个浮动清除元素）。

标签： html css internet-explorer-8 forms input-field

【解决方案1】：

我遇到了完全相同的问题，为了解决它，我设置了

display:block

在跳跃并修复它的元素上。希望对您有所帮助。

【讨论】：

【解决方案2】：

问题是当你聚焦一个输入文本元素时，你的浏览器会在它周围放置 2px 边框作为焦点，如果它包含在一个紧凑的容器中，它会改变它的位置...

我认为这与始终拥有 2px 边框更相关。使用相同颜色的边框和您的文本字段具有透明边框... 您的问题已在此问题上得到解决

StackOverflow Question when focusing an input field border 8270380

【讨论】：

【解决方案3】：

这是推测，但由于关注某个元素似乎会触发转换，因此您可能对这些关注的元素应用了不同的样式。增加的边距或边框可能是原因。

【讨论】：

我刚刚检查了其他样式表。我在哪里没有任何 :active 或 :focus 样式的规范。

【解决方案4】：

没什么大不了的：- 大纲：无；

在输入标签中

input {


  width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    display: block;
    border-radius: 5px;
    outline: none;

}

如果你想拥有自己的边框，那就放

input:focus {
    border: 2px solid salmon;
    color: #333;
}

【讨论】：

【解决方案5】：

我认为您的结构与您的父结构 CSS 冲突（可能是您使用第三方插件，如 jQuery UI 或其他）只是为了确认剪切或复制您的冲突代码并粘贴到您的父结构的一侧或身体标签的开头。你会发现区别的。

为了获得适当的帮助，我想查看您的代码。谢谢

【讨论】：

我没有在这个项目中使用 jQuery UI。