input placeholder line-height issue

Adding line-height for placeholder on Firefox specifically fixes the issues. Otherwise adding line-height to ::placeholder breaks Safari.

  &::-moz-placeholder {
    line-height: 36px; // this should be equal to height of the input
  }

The accepted answer of line-height:normal; worked for me in almost every circumstance. But Firefox when the input height is specified in px was still giving me issues. I ended up needing to target the browser for this. I used the WordPress global $is_gecko, but there are many other solutions for other platforms out there for targeting the browser with a class, which I find to be the more durable solution than using any -moz hacks. It sucks targeting specific browsers, but sometimes it's needed.

Not sure why, but line-height: revert; seems to work in Firefox. Seems like if the main input has line-height: normal, then setting the placeholder explicitly to line-height: normal as well should have the exact same effect as line-height: revert but it does not seem to work that way in ff.

input.special-field {
    height: 48px;
    line-height: normal;
}
input.special-field::placeholder {
    height: inherit;
    line-height: normal;
    vertical-align: revert;
}
.gecko input.special-field::placeholder {
    line-height: revert;
}