html - 聚焦时输入收缩 - Chrome

Question

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

 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; 
    }

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

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

Answer 1

使用:focus伪类。

input:focus {
    outline: none;
}

像这样：JSFiddle。

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