なぜこれらの2つのボタンは異なるレンダリングです

Question

私はリンクとボタンを同じスタイルにしようとしています。

<button>と<a>は、以下のCSS宣言（FFの外側の境界線とその2つの高さと長さが異なることに注意してください）でFFで細かくレンダリングされているのはなぜですか？クロームでは、同じようにレンダリングされますが、外側の境界線があります。 IEでは、それらは等しくレンダリングされますが、丸い枠線はありません（IE8、つまり枠線半径をサポートしていません）。

は、相続人jsfiddle versionと相続人のcss

button, a 
{  
    background-color: #7da7d8; 
    color: #e7e4ed; 
    border: 3px solid #f7f7f7; 
    border-radius: 8px 8px 8px 8px; 
    text-align:center; 
    font-weight: normal; 
    display: inline-block; 
    line-height: 1.2em; 
    margin: 4px; 
    width: 120px;  
    padding: 6px; 
    font-size:1.2em; 
    text-decoration:none; 
    cursor: pointer; 
} 

、これを行うためのユーザビリティの問題にコメントをしてくださいいけない - 私は私の理由があります。

----------アップデート--------------- 以下のコメントから、IveはCSS、check it out on jsfiddleを更新しました。どういうわけかその角の境界を取り除く...

Answer 1

短い答え：ブラウザは、実際のフォーム要素（ボタンなど）とテキストのハイパーリンクを別々にレンダリングします。

ブラウザをより類似したものにするために、さらに変更できるものがいくつかあります。ただし、変更できないものがあります。そのため、ピクセルが同一のスタイルを実現できない場合があります。

最も顕著なことに、buttonとaの間の異なる長さは、それらをレンダリングするために使用される異なるボックスモデルによって引き起こされます。ボタンは通常border-boxを使用し、他のほとんどはcontent-box（元のW3Cボックスモデル）を使用します。あなたが解決できるbox-sizingスタイルを追加することにより：

/* Or border-box */ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 

もう一つは：それを含む要素からではない継承フォントスタイルを行うフォーム要素。これらの要素自体にフォントスタイルを設定して、フォントのレンダリング方法を変更する必要があります。

更新されたフィドルについて、これはブラウザ固有の不一致であり、あなたができることは何もないと思います。私が言ったように、あなたは画素同一のスタイルを達成することができないかもしれません。