クロスブラウザの入力ボタンの高さと幅

Question

body #wrapper .button { 
    background: #00b1ff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #00b1ff 0%, #006aff 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b1ff), color-stop(100%,#006aff)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #00b1ff 0%,#006aff 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #00b1ff 0%,#006aff 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #00b1ff 0%,#006aff 100%); /* IE10+ */ 
    background: linear-gradient(top, #00b1ff 0%,#006aff 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b1ff', endColorstr='#006aff',GradientType=0); /* IE6-9 */ 
    height: 45px; 
    width: 118px; 
    color: white; 
    font-size: 20px; 
    font-weight: bold; 
    margin-left: 10px; 
    text-align: center; 
    text-shadow: 0px -1px 0px #223847; 
    cursor: pointer; 
} 

これは、さまざまなブラウザ間で高さ/幅のバリエーションを作成するようです。ブラウザー間でピクセルの高さと幅を完全に得るための提案はありますか？グラデーションがうまくいくように見えますが、古いブラウザでは単色に劣化すると大丈夫です。

Answer 1

ブラウザベンダーは、特定のスタイリングを追加することがよくあります。境界線、アウトライン、パディング、マージンなどはブラウザによって異なります。 reset cssを使用すると、すべてをデフォルトに戻したり、少なくとも既知のものに戻すことができます。

See also.

Answer 2

パディング、ボーダー幅、ボックスサイズ、およびフォントファミリを追加してみてください。これらのすべてが幅と高さ全体に影響を与える可能性があり、ブラウザのデフォルト値が異なる可能性があります。最初にすべての私はエリックマイヤーCSSがhttp://meyerweb.com/eric/tools/css/reset/

セカンド事をリセットすることをお勧めしたい

Answer 3

ねえ、あなたがredistributbleであるためにあなたのボタンを計画している場合、最初にすべてのあなたが使用できるように、.buttonスタンドアロンのままに（無意味な親セレクタを削除後で）。さらなる開発と優れたプラクティスのために、コアプロパティを持つデフォルトのボタンをいくつかの基本色で作成してください。後で異なる色のバリエーションを持つ新しいクラスを追加することができます。