Поле ввода распространяется на Mozilla Firefox

Question

Я тестировал свой сайт на разных веб-браузерах, включая Google Chrome, Mozilla Firefox, Opera, IE 11 и Edge. Я заметил, что в Mozilla Firefox и IE 11 поле ввода было расширено для 2px.
Есть ли способ исправить это?

input[type="text"], 
 
input[type="password"] { 
 
    background: #f0f0f0; 
 
    height: 36px; 
 
    width: 238px; 
 
    border: none; 
 
    border-radius: 2px; 
 
    outline: none; 
 
    text-align: center; 
 
    font-family: Lato-Regular; 
 
    font-size: 13px; 
 
    margin-top: 10px; 
 
    color: #bfbfbf; 
 
}

<form action="#"> 
 
    <input type="text" placeholder="username"> 
 
    <input type="password" placeholder="password"> 
 
    <input type="submit" value=" "> 
 
</form>

В Google Chrome, Opera и реберные это выглядит следующим образом:

Но на Mozilla Firefox и IE11 это выглядит следующим образом:

Answer 1

добавить box-sizing: border-box к вашим input с:

input[type="text"], 
 
input[type="password"] { 
 
    box-sizing: border-box; 
 
    background: #f0f0f0; 
 
    height: 36px; 
 
    width: 238px; 
 
    border: none; 
 
    border-radius: 2px; 
 
    outline: none; 
 
    text-align: center; 
 
    font-family: Lato-Regular; 
 
    font-size: 13px; 
 
    margin-top: 10px; 
 
    color: #bfbfbf; 
 
}

<form action="#"> 
 
    <input type="text" placeholder="username"> 
 
    <input type="password" placeholder="password"> 
 
    <input type="submit" value=" "> 
 
</form>