焦点时输入收缩 - Chrome

Question

我有一些简单的输入和一些样式。

＆＃13;

＆＃13;

 input {
    	display: block;
    	width: 100%;
    	padding: 4px 6px;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box; 
    }

＆＃13;

  <input type="email" id="email" name="email" placeholder="Email">
   

＆＃13;

＆＃13;

＆＃13;

Firefox的代码运行得很好。但是，在Chrome中，当输入被聚焦时，它会缩小一点（小于正常状态）。 我已尝试在此输入上应用边框大小，但问题仍然存在。我该如何解决这个问题？

Answer 1

使用:focus伪类。

input:focus {
    outline: none;
}

像这样：JSFiddle。

它在Chrome和Firefox中也适合我。另外值得考虑使用normalize.css（或类似的东西），以避免（或修复）浏览器默认的css attriibute设置。