cross-browser - CSS Pixel Perfection in Chrome

Question

In pursuit of pixel perfection the browser seems to be adding an extra pixel to the top and bottom of the following input element but I can't figure out from where.

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

Chromes magnifying glass shows the element with a total height of 32 and I'm trying to get 30.

It's a typical devise form coded in 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/

更新：

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