<button>パディング/幅の問題

Question

私は<button>を使用してフォームで投稿要求をしています。私はまたのスタイルを<button>とよく似ています（私はa.buttonが必要です）。

ボタンには一定の高さのパッドがあります。私がボタンの幅を指定すると、両方とも同じに見えます。しかし、私が幅を<button>に加えると、パディングは無視されます。

Chrome、Firefox、Operaでこの問題が発生しているので、レンダリングエラーではないと思います。

.button, button { 
    margin: 0; 
    display: inline-block; 
    border: 0; 
    text-decoration: none; 
    cursor: pointer; 
    color: black; 
    background: #ddd; 
    font: 12px Verdana; 
    padding: 40px; /* 40px, so you can see that it won't be rendered with width */ 
    text-align: center; 
} 

HTML：：

<a href="#" class="button">Some text</a> 
<button>Some text</button> 
<!-- Works fine till here --> 
<br /><br /> 
<a href="#" class="button" style="width:200px">Some text</a> 
<button style="width:200px">Some text</button> 

フィドル：http://jsfiddle.net/9dtnz/

任意の提案はなぜブラウザはパディングを無視している。またここで<input type="submit" />

と同じ問題は、基本的なCSSですか！ （幅を使用するときは高さ/左右を使用するときは上と下）。

Answer 1

非常に奇妙な、私は私のChromeは入力要素のためのbox-sizing: border-box;のルールを持っているので、パディングがだから（一部の接頭辞が必要になることができます）box-sizing: content-box;を指定することを避けるために...幅に

が含まれている見てきました。

Answer 2

私にはうまく見えるので、スタイルシートの競合の問題かもしれません。 ！importantを使用して試してみてください。何があっても問題を解決することができます。

.button, button { 
    margin: 0; 
    display: inline-block; 
    border: 0; 
    text-decoration: none; 
    cursor: pointer; 
    color: black; 
    background: #ddd; 
    font: 12px Verdana; 
    padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */ 
    text-align: center; 
} 

これが役に立ちます。

マイケル。