CSS стиль ввода магии

Question

Я пытаюсь создать поле ввода и некоторые кнопки в согласованном виде, но, похоже, какая-то магия продолжается. Событие, хотя вход имеет те же самые классы, что и кнопки, он немного выше. Кроме того, текст заполнителя по-разному выравнивает введенный текст (один пиксель выше). Можно ли это решить с помощью кросс-браузерного решения?

Редактировать: Как указал Ян Туро, высота линии фиксировала проблему в Webkit. Теперь, если вы проверите код в Firefox, вы заметите, что элемент все еще имеет границу 1px. Как избавиться от этого?

Thx, PS

Codepen

HTML

<form action=""> 
    <a href=""class="btn">Button</a> 
    <input type="text" class="btn" placeholder="input"/> 
    <button class="btn">Login</button> 
    <a href=""class="btn">Button</a> 
</form> 

CSS

.btn, input, button { 

    display: inline-block; 
    vertical-align: middle; 
    line-height: 15px; 
    font-size: 15px; 
    font-family: sans-serif; 

    border: 0; 
    padding: 0; 
    margin: 0; 

    cursor: pointer; 
    cursor: hand; 

    text-decoration: none; 
    color: #f2f2f2; 
    background-color: #1a1a1a; 
    padding: 7px 12px 8px 12px; 
    margin-right: 1px; 
    margin-bottom: 1px; 

} 

Answer 1

line-height не уменьшить высоту входного сигнала ниже font-size плюс некоторые пиксели see the MDN info:

При замене встроенных элементов, таких как кнопки или другой элемент ввода, линия-высота не влияет.

Просто удалите line-height и вы должны получить то, что вы хотите, даже без применения height стиля. Установка line-height на 130% тоже работает.

Answer 2

Я пытаюсь решить это в течение нескольких дней, и каждое решение не является целым и не работает в разных браузерах.

Я считаю, что этот код сделать работу:

float: left; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
height: 33px; 

Я обновленное Codepen - http://codepen.io/anon/pen/pvqRwE