Text input and submit input elements have different height in firefox - html

Question

The code:
<input class="text" type="text" value="text"><input class="submit" type="submit" value="submit">
with styling:
.text, .submit {
outline: none;
border: none;
padding: none;
margin: none;
background: red;
padding: 3px;
box-sizing:border-box;
}
(https://jsfiddle.net/citizenfive/04camn42/)
creates 2 input elements with different heights (submit is larger by ~1px).
The code works fine on Chrome. Is there a way to solve this for Firefox?

Answer 1

All browsers have differences between default behaviours and styles, but firefox is more flexible with S.O. and form elements are controlled by default by the operating system.
The solution is remove padding or use height with EM meassures.
Remove padding:
https://jsfiddle.net/04camn42/2/
.class { padding: 0 }
Using EM height:
https://jsfiddle.net/04camn42/3/
.class {
height: 1.5em
}
IF you use EM you don't worry about responsiveness and user choices.

Answer 2

Removed padding and added height, this works fine in Chrome and Firefox but I don't know whether this fix is fine for you.
New css,
.text, .submit {
outline: none;
border: none;
padding: none;
margin: none;
background: red;
/* padding: 3px; */
box-sizing: border-box;
height: 23px;
}

Answer 3

In order to remove all padding and borders from buttons and inputs for Firefox this handy little CSS snippet will help you out.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Also, what's been suggested by the other posters: use box-sizing: border-box; on all form elements to make them behave in all browsers (apart from Firefox).

Answer 4

.text, .submit {
outline: none;
border: none;
padding: none;
margin: none;
background: red;
padding: 3px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
see in i