为什么在IE8中点击HTML表单元素时它们会移动？

Question

我有一个HTML表单，其中包含许多输入字段（文本和选择类型）。我将它们浮动排列，每行放置两个。在所有浏览器中（包括IE7），一切正常，但是由于某种原因，在IE8中，每当我单击任何一个字段或其标签时，该字段或周围的一个字段会垂直上下移动。然后，当我从框中点击离开时，位置会恢复正常，尽管然后可能会移动附近的另一个框。此外，并非所有文本框字段都存在此问题，而且单击相同的文本框并不总是会引起此问题。有什么想法吗？

- DecafJava

---

你能否提供一个 jsfiddle，这样人们就可以更好地了解你实际的操作方式？ - woutr_be

我目前无法访问代码，但没有异常的实现。这是一个常规的<form>，带有一堆浮动的<input>元素（每行由两个输入组成，后跟一个浮动清除元素）。 - DecafJava

Answer 1

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

。

display:block

有一个元素一直在跳来跳去，解决方法是把它固定住。希望这能帮到你。

- abc123

Answer 2

当您聚焦一个输入文本元素时，问题在于您的浏览器会在其周围放置2px的边框以表示焦点，这可能会导致其位置移动，特别是当它位于狭窄的容器中时...我认为这与始终使用2px边框有关。将相同颜色的边框用于您的文本字段，使其具有透明的边框...您的问题已在此问题中得到解决：StackOverflow Question when focusing an input field border 8270380。

- Muhammad Ahsan

Answer 3

这只是猜测，但由于聚焦在一个元素上似乎会触发转换，因此您可能已经应用了不同的样式来聚焦这些元素。增加的边距或边框可能是原因。

- Jacob

---

我刚刚检查了其他样式表，没有任何 :active 或 :focus 样式的规范。 - DecafJava

Answer 4

在输入标签中加上以下内容即可：outline: none;

input {


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

}

如果您想要有自己的边框，则放置以下内容：

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

- chinmay prajapat

Answer 5

我认为你的结构与父级结构的CSS冲突了（可能是你使用了第三方插件，比如jQuery UI或其他），请确认一下，将冲突的代码剪切或复制到父级结构之外或body标签的开头。你会发现不同之处。

为了提供适当的帮助，我想要查看你的代码。 谢谢

- Mudit Chauhan

---

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