web-dev-qa-db-ja.com

CSS：ChromeのボタンのサイズはFirefoxとは異なります

私は次のHTMLコードを持っています：

<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form> 
... 
<input class=submitbutton type=submit value="Create Listings" /> 
</form>

Firefoxでは、入力ボタンにChromeよりも多くのパディングがあります。

なぜ何かアイデアはありますか？

更新：なぜ私が負のマージンを持っているのか疑問に思っているなら-それは入力フィールドと入力ボタンの間に-スペースが多すぎるからです。

htmlcssfirefoxgoogle-chrome
21
Hank
/* Remove button padding in FF */
button::-moz-focus-inner {
    border:0;
    padding:0;
}

ChromeとFirefoxでも同じボタンの外観が得られます。

67
Jeaf Gilbert

開発者がさまざまなブラウザでテストし、ボタンの違いを確認したとしても、ユーザーはそうではありません。ユーザーが気付かないことに集中するのは簡単すぎます。ユーザーはFirefoxまたはIEまたはChromeを使用している可能性がありますが、すべてではありません。ユーザーがブラウザを切り替えることはめったにありません。時間は言うまでもなく、それらを切り替えて、数ピクセルの違いについて文句を言います。

したがって、一度に1つのブラウザーでのボタンとエクスペリエンスを検討し、そのエクスペリエンス/ブラウザーでうまく機能する場合は、わざわざ時間を費やさないでください。代わりに、次の手順に進みます。

これは「なぜ」とは答えませんが、他の誰かがそれを説明しました。

11
John K

フォーム要素は、OSやブラウザに応じて（デフォルトとして）異なってレンダリングされます。フォーム要素（入力フィールド、送信ボタンなど）をすべてのインスタンスで同じように見せたい場合は、境界線、パディング、マージンを使用して明示的にスタイルを設定する必要があります。

4
corroded

これを試して

/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}
2
Firdaus Rudy

ここで誰も言及していないのは、Chromeがこれらの要素のCSSをリセットするということです。

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button

したがって、パディングを何に設定しても、私が知る限り、Chromeによって上書きされます。 !importantや他のテクニックを使ってみましたが、まだうまくいきません。誰かがこれについて何か洞察を持っているなら、私は知りたいです。

1
Jacob

-webkit-box-sizing:content-boxを使用してから、ボックスモデルについて読んでください。

1
MeHere

両方のブラウザで同じサイズを取得するには、リセットなど、すべてのCSS要素に同じ初期値を設定する必要があります。

これは私が問題を修正した方法です：これをあなたのcssファイルの先頭に置いてください

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a
    {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      border-top-width: 0px;
      border-right-width-value: 0px;
      border-bottom-width: 0px;
      border-left-width-value: 0px;
    }

ここで、ページのいくつかのアスペクトの変更を修正する必要がありますが、すべてのブラウザーでほぼ同じように見えます。

0
Steven Lizarazo

高さとパディングを同時に変更しようとしました。

結果はかなり良いです。両方のブラウザ（FFとChrome Linuxの場合））で正しいようです...たとえば、私は次のように述べています。

.classname {
height:20px;
    padding:4px;
}

多分それは私の幸運な日です...しかしあなたはそれを試すことができます。

0
Mela