Cross browser 铬元素的CSS像素完美

为了追求像素的完美，浏览器似乎在以下输入元素的顶部和底部添加了一个额外的像素，但我不知道从哪里开始

  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"

---

你应该取出填充物：

input { padding: 0; }

JSFiddle：

更新：

---

在谷歌浏览器中，我看到的高度是30px

这肯定是有帮助的，但仍然有一个讨厌的像素从某处进来。