html - 在字段中输入详细信息后输入文本会缩小

Question

我的联系表有问题。每次当我在输入文本字段中输入一些详细信息(您通常会在此处填写您的姓名)时，当我开始在电子邮件字段中输入详细信息时，它会缩小一点。

我可以知道它为什么要做这样的事情吗？我知道我在输入元素中声明了一个 1 像素的边框，但是在内部有值之后这不应该打扰字段吗？

希望对此有所帮助。

Code:

http://jsfiddle.net/24G6z/1/

谢谢。

Answer 1

你的问题是

input:focus { 
     border:0;
}

因为您的电子邮件字段有一个特殊的选择器(见下文)，它不会经历任何边框变化(也没有故障)

input[type="email"] {
    border:0
}

但是，您的名称字段应用了 border:1px solid #58B9FA。当用户关注它时，该边框将被移除(因为 :focus 选择器)并且你会得到那种不稳定的运动。

希望对您有所帮助!