Chrome中的CSS Pixel完美

Question

为了追求像素完美，浏览器似乎在以下输入元素的顶部和底部添加了一个额外的像素，但我无法从中找出。

  input {
    border-radius: 10px;
    height:30px;
    display: inline-block;
    float:left;
    border:none;
    }
  }

Chromes放大镜显示总高度为32的元素，我试图获得30。

这是用HAML编码的典型设计形式：

.registration{:style => 'display:none'}
  = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
    %div
      = f.label :email do
        = f.email_field :email, :autofocus => false, :placeholder => "Email"
    %div
      = f.label :password do
        = f.password_field :password, :placeholder => 'Password'
    %div
      = f.label :password_confirmation do
        = f.password_field :password_confirmation, :placeholder =>'Confirm Password'
    %div= f.submit "Sign up"

Answer 1

你应该拿出填充物：

input { padding: 0; }

JSFiddle：http://jsfiddle.net/nSmU9/

更新

在谷歌浏览器中，我看到高度为30像素。