padding and max-width of buttons in Firefox

Question

I am trying to style some buttons and I am trying to both limit the width of my buttons and have some horizontal padding, so there is some space between the text and the border.

I have therefore applied the following CSS to my class:

.class1 {
    border: 1px solid;
    padding: 0 20px;
    max-width: 100px;
    white-space: nowrap;
    overflow:hidden;
}

See this jsFiddle for an example.

My problem is that when the text is too long, Firefox (latest version: 22) does not respect the left padding anymore and make the text stick to the left border, as one can see in the middle button in this screenshot:

When Chrome still respect the left padding:

Is there some way I can make Firefox behaves the same way as Chrome and IE10 here?

Some things I have determined:

• IE10 behaves the same way as Chrome, so I think it's a Firefox problem.
• If I replace buttons with spans, it works, but of course I need buttons. I would like to avoid using <a> if it is not necessary, since it is not semantically correct.
• Changing the box-sizing property or resetting -moz-focus-inner, does not help.

Answer 1

Try this 'hack':

.class1::-moz-focus-inner {

    padding: 0px 20px;

}

You have to remove the padding in Firefox to prevent double padding.

@-moz-document url-prefix() {

    .class1 {

        padding: 0px;

    }

}

(It works for me in FF 22, jsFiddle)