Question: **Check this [Jsfiddle](https://jsfiddle.net/fcg48csy/5/) first.**

Here my `<input>` with has a `height of 10px;` has given a `padding of 10px;`, I know it is not a right way of giving style. But still, **it's working perfectly in Chrome, IE and Safari** but it is an another story when it came to **Firefox it crops my `placeholder`**.why.?

I know different browsers have their different rendering methods but can anyone point me the exact reason behind this and is there a way I can solve this **without changing the height, padding or font size**(it should not be less than 14px).?

Answer: 
Please check if it works for [you](https://jsfiddle.net/anmolsandal/fcg48csy/7/)

```
input {
 padding: 10px;
 font-size: 14px;
 font-weight: normal;
 width: 100%;
 line-height: 18px;
 height: auto;
}

```
They count height and padding differently, try this.
Use only height or only padding. Here I add height and only x padding

```
input {
  font-size: 14px;
  font-weight: normal;
  width: 100%;
  height: 30px;
  padding: 0 10px;
}

```