Question

I have a base css which amongst other elements, sets my inputs to:

  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;

And i also have this for the specific button in question

header input[type=submit] { background:#383838; color:#FFF; padding:4px 5px; }

Everything is fine except the input button in Chrome which is 2 pixels shorter in height and in width then every other browser (so like there is 1 pixel diff for each side). What makes this more frustrating is this isnt affecting safari which is a webkit browser also.

Any ideas why?

Cheers,
Adi.

Answer 1

buttons and inputs are rendered (slightly) differently by every browser (padding, margins, etc.) If you want the exact same result across every browser, you’ll need to target each specifically with different style rules.