chrome浏览器下“多余”的2px

       箭头在调试页面的时候，发现select，input等元素在chrome浏览器下莫名的多了margin:2px，具体看图吧！

stackoverflow上的提问中也类似的(应该是margin,好想提问的时候被说成了padding)，如下：

Firefox 4.0.1: adds no padding to the elements 

Chrome 11.0.696.68: adds 2px padding to top and left on input fields, but only 2px to top on select-elements

Safari 5.0.3: adds 2px padding to top and left on input fields, but only 2px to top on select-elements

But why is that? And can I fix it with some simple CSS rather than doing specific stylesheets for theese to browsers? I just want it to look like in Firefox without the auto padding..

的确！在chrome浏览器上select元素会有上下外边距2px(见上图)，input元素会有上下左右外边距2px，这在非webkit浏览器中是没有的！

建议在reset.css中针对select、input元素添加margin:0;padding:0的重置规则。（关于css reset）

另外，如果你不喜欢chrome下元素获得焦点后的黄色外框，可以类似这样清除 

1 *:focus   /*不要像我这样直接使用*匹配，根据实际需求而定，这里只是例子*/
2 {   
3     outline: none;   
4 }

特此记录备忘！

转载于:https://www.cnblogs.com/shishm/archive/2012/03/07/2384273.html