chrome浏览器下“多余”的2px
2012-03-07 21:39 iBlog 阅读(1581) 评论(4) 编辑 收藏 举报箭头在调试页面的时候,发现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 }
特此记录备忘!
本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名时邵猛(包含链接)。如您有任何疑问或者授权方面的协商,请给我留言。如果您觉得文章很有用,欢迎捐赠!【通过】。