ボタンの形状が高さの点で矛盾しているリンク

Question

私は、ボタンのスタイルに合ったスタイル付きボタンとスタイル付きリンクを持っています。 Chrome 13、Firefox 6、およびIE 9でテストしています。このボタンとリンクはFirefoxの場合を除き、3つのブラウザすべてで同じに見えます。 http://jsfiddle.net/AWcYG/

ブロックレベルの要素ではないため、リンクに高さを適用できません。私がそれをブロックレベルの要素にすると、私はそれらを互いに隣り合わせに整列させるために浮動しなければなりません。さらに、3つのブラウザすべてで高さがオフになっています。私は絶対的な位置付けを考えましたが、私は彼らの位置をハードコードしない限り、それらを互いに隣り合わせにする方法は見当たりません。

条件文を使用する以外に、3つのブラウザすべてでボタンとリンクの高さを一致させる方法はありますか？たぶん私は知らないか、あるいは何かが足りないハックかもしれない？

UPDATE：その方向に私を指しているため

@Wesley感謝。

button::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
    padding: 0px 2px 0px 2px; 
    border: 1px dotted transparent; 
    } 

結果は完璧に非常に近いですが、Firefoxの6で、それはオフに1pxのことで、まだだ：私は、Firefoxはそのボタンに以下を追加して、あなたのコードは、それが何をするかない理由を説明していることが分かりました。私はこれをもう少し調べて、修正を見つけたら別のアップデートを投稿しますが、ちょうど1pxをオフにしても、これまでよりもはるかに優れています！

UPDATE 2：

Iが発見修正ボタンで高さを指定した：高さを追加

.db .menu input, 
.db .menu a { 
    background-color: #01137F; 
    border: 1px solid #fff; 
    border-radius: 5px; 
    box-shadow: 2px 2px 3px #666; 
    color: #fff; 
    cursor: pointer; 
    font-family: Arial, sans-serif; 
    font-size: 14px; 
    height: 26px; 
    padding: 4px 10px; 
    } 

は、3つのすべてにおいて、画素に、正確に同じボタンを描画します私が参照していたブラウザ。

Answer 1

Firefoxは、<button>と明らかに<input>ボタンになると特別なニーズがあるようです。モジラのみのCSSのこのビットを試してみてください：

.menu input::-moz-focus-inner { 
    padding:0; 
    border:0; 
} 

私は一週間ずっと前、この上で立ち往生し、#css IRCの誰かが私にこのトリックを示し、パディングを正規化するように思われたことを覚えています。

デモ：http://jsfiddle.net/AWcYG/1/（FF3、4でテストされ、5、うまくいけばあまりに6で動作します）正しい方向に私を指しているため