为什么我的HTML表单元素在IE8中单击时会移动?

时间:2012-08-06 07:06:18

标签: html css internet-explorer-8 html-form input-field

我有一个带有一堆输入字段的HTML表单(text和select类型)。我漂浮他们,每排有两个。在所有浏览器(包括IE7)中,一切正常,但由于某些原因,在IE8中,每当我点击任何字段或其标签内部时,该字段或周围的字段都会垂直向上或向下移动。然后,一旦我离开盒子,该位置就会恢复正常,但是附近的另一个盒子可能会移动。此外,并非所有文本框字段都存在此问题,单击相同的文本框并不会导致此问题。有什么想法吗?

5 个答案:

答案 0 :(得分:4)

我遇到了完全相同的问题,为了解决这个问题,我设置了

display:block

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

答案 1 :(得分:2)

问题是,当您对输入文本元素进行聚焦时,您的浏览器会在其周围放置2px边框以进行聚焦,如果它包含在一个紧凑的容器中,则会改变其位置...

我认为与所有时间都有2px边框更相关。使用相同的颜色边框和文本字段来创建透明边框... 您的问题已在此问题上得到解决

StackOverflow Question when focusing an input field border 8270380

答案 2 :(得分:1)

这是推测,但由于聚焦在元素中似乎会触发移位,因此您可能会将不同的样式应用于这些聚焦元素。增加利润或边界可能是负责任的。

答案 3 :(得分:1)

没什么大不了的:- 大纲:无;

在输入标签中

input {


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

}

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

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

答案 4 :(得分:0)

我认为你的结构与你的父结构CSS相冲突(你可能使用第三方插件,比如jQuery UI或其他)做一件事只是为了确认剪切或复制你的冲突代码并粘贴你的父结构的一面或开始你的身体标签。你找到了不同之处。

为了获得适当的帮助,我想查看您的代码。 日Thnx