button tag vs anchor tag in firefox, problems with text

What is causing this problem shown below with firefox? The first button is a styled anchor tag and the second one is a html5 button tag. In Chrome they both are identical but in firefox you can see the problem with the "LOGIN" text.

HTML:

<a href="#"开发者_高级运维 class="buttonDark">LOGIN<span>›</span></a>
<button type="submit" name="submit" class="buttonDark">LOGIN<span>›</span></button>

css is here

The image showing the problem can be found here -->image

Try adding the following to your code:

::-moz-focus-inner {
    padding:0;
    border:0;
}

Firefox has button problems galore. That sometimes fixes them because the 'chrome' Firefox uses is usually defined with some padding and a border, but you can't see either, usually. This is there so you can have a little dotted border around selected inputs.

See here for answer: firefox-problems-with-floated-span-inside-button

I found a solution for this problem. Here I have posted the soltuion.

    `http://jsfiddle.net/Uysbm/`

You are defining the line height. so it will give extra space. you can use this...

vertical-align=middle;