CSS Pixel Perfection в Chrome

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/

Обновление:

В Google Chrome я вижу, что высота составляет 30 пикселей.