An irritating little bug. But there is a fix, as always.

ℹ️ I think this bug has been fixed, so this article is a bit useless.

It's an ugly fix, though. But it's caused by a bug, so it's okay. Right?

Why not just use px or em since they work fine? Because of a fluid-width layout.

text-indent to rescue

text-indent: x%; works for the left and right. You can define the top with px. But it won't work in IE6 and IE7. Luckily, you can target those separately. But, it doesn't seem to be working at all in Safari. And, in Chrome, when you move focus to the field the cursor ignores the text-indent until you start typing (check the fiddle below). Not the biggest flaw but irritating still.

/*This could work, but doesn't*/
input,
textarea {
  text-indent: 2%;
}
.ie6 input,
.ie7 input,
.ie6 textarea,
.ie7 textarea {
  padding: 2%;
}

This fiddle will illustrate better.

The fix

Loads of inconsistencies and hassle. Why not simply target only Firefox and solve this issue without headaches.

@-moz-document url-prefix() {
  /*Top magrin defined in px*/
  input,
  textarea {
    padding: 15px 0;
    text-indent: 2%;
  }
  /*New width, since it's narrower without padding*/
  textarea {
    width: 99% !important;
  }
}

Here's an article on targeting browsers.